Angular 8：无法从 Rest Api 获取消息

Question

我使用以下链接 https://grokonez.com/python/django-angular-6-example-django-rest-framework-mysql-crud-example-part-2-django-server 和 https://grokonez.com/frontend/django-angular-6-example-django-rest-framework-angular-crud-mysql-example-part-3-angular-client 创建了一个 django rest API 和调用这个 rest 的 angular 应用程序。

考虑到我是此类开发的新手，因此我首先创建了一个仅显示客户列表的应用程序。 Django rest API 工作正常。我用浏览器测试了一下：

但我的问题在于 Angular 应用程序，它似乎无法使用相同的 URL 获取消息：http://localhost:8000/customers 以下是我的角度代码：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomersListComponent } from './customers-list/customers-list.component';

@NgModule({
  declarations: [
    AppComponent,
    routingComponents,
    CustomersListComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CustomersListComponent } from './customers-list/customers-list.component';

const routes: Routes = [
    { path: 'customers', component: CustomersListComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

customer.ts

export class Customer {
    id: number;
    name: string;
    age: number;
    active: boolean;
}

customer.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CustomerService {
    private baseUrl = 'http://localhost:8000/customers';

    constructor(private http: HttpClient) { }

    getCustomersList(): Observable<any> {
        return this.http.get(`${this.baseUrl}/`);
    }

}

customers-list.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs';

import { CustomerService } from '../customer.service';
import { Customer } from '../customer';

@Component({
  selector: 'app-customers-list',
  templateUrl: './customers-list.component.html',
  styleUrls: ['./customers-list.component.css']
})
export class CustomersListComponent implements OnInit {

    customers: Observable<Customer[]>;


    constructor(private customerService: CustomerService) { }

    ngOnInit() {
        console.log("Hellllllllo from customers-list.component.ts ngOnInit");
         this.reloadData();
    }

    reloadData() {
        this.customers= this.customerService.getCustomersList();
    }

}

customers-list.component.html

<h1>Customers {{JSON.stringify(this.customers)}}</h1>

<div *ngFor="let customer of customers" style="width: 300px;">
    <h2>Hello iii</h2>
    <div>
    <label>Name: </label> {{customer.name}}
  </div>
  <div>
    <label>Age: </label> {{customer.age}}
  </div>
  <div>
    <label>Active: </label> {{customer.active}}
  </div>
</div>

从浏览器调用 /customers 得到的结果如下：

“路由和导航”消息来自 app.component.html 如您所见，显示消息客户，但不显示与可变客户（即客户列表）相对应的所有内容。

有人知道这个问题的主要原因是什么吗？以及我该如何解决？ 提前谢谢你

Answer 1

您应该subscribe 从 API 获取响应，因为 http.get 仅在您订阅它时返回一个可观察的、可观察的调用。试试下面的方法

 reloadData() {
   this.customerService.getCustomersList().subscribe((res: any) => {
       this.customers = res;
   });
 }

Answer 2

为您服务

getCustomersList(): Observable<any> {
        return this.http.get(`${this.baseUrl}/`);
    }

这个函数返回一个 observable 所以你应该像这样订阅它来提出请求

 this.customerService.getCustomersList().subscribe((res: any) => {
       this.customers = res;
   });

或者在您的 html 文件中，您可以像这样添加异步管道

*ngFor="let customer of customers | async