显示来自httpClient Iteration ngFor的Angular4响应数据

I have this code from Angular 4

我有角4的代码

And I have this (Array objects)response in console

我在控制台有这个(数组对象)响应

And I want to use this data in *ngFor to iterate this objects, how can I get this? Thanks.

我想用*ngFor中的这个数据来迭代这个对象，怎么得到这个呢?谢谢。

1 个解决方案

#1

Since you used {observe: 'reaponse'} for HttpClient.get, there will be full response(both header and body) back, you can use *ngFor to iterator data.body by exposing it as an public variable as below:

因为您对HttpClient使用了{观察:'reaponse'}。get，会有完整的响应(头和正文)返回，您可以使用*ngFor来迭代器数据。通过将其作为公共变量公开如下:

data: any;

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

Template code sample:

模板代码示例:

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

---

HttpClient.get will return body of response by default without {observe: 'response'}. You can also achieve it without {observe: 'response'} as below:

HttpClient。get将在默认情况下返回响应体，而没有{观察:'response'}。你也可以不需要{观察:'response'}，如下所示:

data: any;

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

Template code sample:

模板代码示例:

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

---

Also you can use a async pipe to subscribe and unsubscribe from template without expose data with an public variable:

您还可以使用异步管道从模板订阅和取消订阅，而无需使用公共变量公开数据:

data$: any;

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

Template code sample:

模板代码示例:

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