从httpClient Iteration ngFor显示Angular4响应数据

Question

我有来自Angular 4的代码

我在控制台

中有这个（Array对象）响应

我想在*ngFor中使用这些数据来迭代这些对象，我该怎么做到这一点？感谢。

Answer 1

由于您使用{observe: 'reaponse'}作为HttpClient.get，因此会有完整的响应（包括标题和正文），您可以将*ngFor用于迭代器data.body，方法是将其公开为公共变量如下所示：

data: any;

this.http.get(..., {observe: 'response'})
    .subscribe(data => this.data = data.body);

模板代码示例：

<div *ngFor="let item of data">
  {{item.address}}
</div>

默认情况下，

HttpClient.get会返回响应正文，而不会{observe: 'response'} 。你也可以在没有{observe: 'response'}的情况下实现它，如下所示：

data: any;

this.http.get(...)   // without observe: response
    .subscribe(data => this.data = data);

模板代码示例：

<div *ngFor="let item of data">
  {{item.address}}
</div>

此外，您可以使用async管道订阅和取消订阅template，而不使用公共变量公开数据：

data$: any;

this.data$ = this.http.get(...)
// or 
this.data$ = this.http.get(..., {observe: 'reaponse'}).map(data => data.body);

模板代码示例：

<div *ngFor="let item of data$ | async">
  {{item.address}}
</div>