在控制台中获取数据但无法在 angular 中显示

Question

这是我的 products.component.ts 和我的 Json 在节点服务器和 Angular 服务器上的响应，但我无法在我的 product.component.html

constructor(private http:Http) {
    console.log('Hello fellow user');
    this.getProducts();
    this.getData();
   }


  getData(){
      return this.http.get(this.apiUrl)
      .pipe(map((res:Response)=>res.json()))

    // return this.http.get(apiUrl, httpOptions).pipe(
    //   map(this.extractData),
    //   catchError(this.handleError));
  }
getProducts(){
  this.getData().subscribe(data=>{
    console.log(data);
    this.data=data;
  })
}

这是我的html产品组件

<p>Products work</p>
<div class="container">
  <ng-container *ngFor="let product of data.products">
    <h2>{{product.id}}</h2>
  </ng-container>
</div>

**这是我的res.json**

Answer 1

首先你应该声明你的 data 为数组，如果你有 Product class:

data: Product[] = [];

然后我认为你引用数据是错误的，因为你分配给组件 class

this.data=data;

您尝试使用

访问的模板中的

data.products

尝试更改 *ngFor 行：

<ng-container *ngFor="let product of data">

在控制台中获取数据但无法在 angular 中显示

Getting data in Console but cant display in angular

node.js

angular6