从api响应创建可观察数组

在Angular 2+（4.3.6）中我使用带有REST API的新HttpClient。 API返回定义为一个JSON对象如下：从api响应创建可观察数组

{ 
    count: number, 
    results: MyObject[] 
}

以我API服务我有以下函数来检索数据：

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

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

results: Observable<MyObject[]>;

，并在初始化函数变量

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

，最后在模板

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

我很新的角度，不能弄明白如何使用异步管道访问结果数组而不创建本地对象，如：

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

有谁知道如何做到这一点？

这就是它或多或少的工作原理。 'http request' - >'observable' - >'subscription' ---> data –

这是map操作是什么 - 它可以让你创建一个可观察的基础上的另一个转变：

import "rxjs/add/operator/map";  

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

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

2017-09-07 13:01:28

好奇，看看他们是否真的在寻找。听起来像是他们想跳过组件内部的观察点。他们仍然需要将其创建为本地对象。 –

@ Z.Bagley：是的，这个问题并不是完全清楚他们是想完全跳过课程领域，还是只是避免手动订阅和提取价值。我假设后者，但如果它最终成为前者，我会删除/编辑我的答案。 –

我不完全得到的问题，所以我会重写你可能错误：

1 - 您服务返回可观察到的，这意味着你应该订阅它并将其值设置为订阅：

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中，异步管道应该工作。

2017-09-07 14:06:35 trichetriche

回答