从 api 响应创建可观察数组答案

【问题标题】：Create observable array from api response从 api 响应创建可观察数组
【发布时间】：2017-09-07 22:06:35
【问题描述】：

在 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); }

在我的应用程序组件中，我想使用“异步”管道显示数组中对象的数据。因此，我有一个名为 results 的变量

results: Observable<MyObject[]>;

在初始化函数中

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);
}

有人知道怎么做吗？

【问题讨论】：

【解决方案1】：

这就是 map 运算符的用途 - 它允许您基于另一个转换创建一个可观察对象：

import "rxjs/add/operator/map";    

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

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

【讨论】：

【解决方案2】：

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

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

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

2 - 既然你这样做了，你应该将你的结果输入为结果（或你的 customObject）

results: MyObject[];

3 - Angular 响应返回一个自定义对象，您需要在返回之前对其进行映射：

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

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

【讨论】：