Question

在Angular 2+（4.3.6）中我使用带有REST api的新HttpClient。 api返回一个json对象，定义如下：

{
   count: number,
   results: MyObject[]
}

在我的api服务中，我有以下函数来检索数据：

public getList(): Observable<ApiResponse> {
return this.http.get<ApiResponse>(url); }

在我的app组件中，我想使用＆＃39; async＆＃39;来显示数组中对象的数据。管。因此，我有一个名为results

的变量

results: Observable<MyObject[]>;

并在init函数中

ngOnInit() {
    this.results = this.myService.getList();
}

最后在模板中

<div *ngFor="let item of results | async">
          {{ item.id }}
</div>

我是Angular的新手，无法弄清楚如何使用异步管道访问结果数组而不创建像这样的本地对象：

temp: MyObject[];
ngOnInit() {
    this.temp = this.myService.getList().subscribe(data => this.temp = data.results);
}

有谁知道怎么做？

Answer 1

这是map运算符的用途 - 它允许您根据另一个运算符的转换创建一个observable：

import "rxjs/add/operator/map";    

this.results = this.myService.getList().map(res => res.results);

然后，您可以通过异步管道或订阅来访问它。

Answer 2

我不太明白这个问题，所以我会重写你可能出现的错误：

1 - 您的服务返回一个Observable，这意味着您应该订阅它并将值设置为subscribe：

ngOnInit() {
    this.myService.getList().subscribe(list => this.results = list);
}

2 - 由于您这样做，您应该将结果键入为结果（或您的customObject）

results: MyObject[];

3 - 角度响应会返回您需要在返回之前映射的自定义对象：

return this.http.get(url).map(r => r.json() ? r.json() : r);

之后，在HTML中，异步管道应该可以工作。