代码之家 › 专栏 › 技术社区 › nifoem bar

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

ngfor angular

2

nifoem bar · 技术社区 · 8 年前

我有来自Angular 4的代码

enter image description here.

我想用这些数据 *ngFor 要迭代这个对象,我怎么才能得到它?谢谢

1 回复 | 直到 8 年前

1

Pengyy 8 年前

自从你使用 {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。收到 {observe: 'response'} . 你也可以不用 {观察:'响应'} 详情如下:

data: any;

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

<div*ngFor=“let item of data”>
{{item.address}}

也可以使用 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>