Observable 未在 Angular 2 中显示数据答案

【问题标题】：Observable not displaying data in Angular 2Observable 未在 Angular 2 中显示数据
【发布时间】：2016-11-01 12:16:10
【问题描述】：

我需要使用 Angular 2 进行 RESTful 调用并观察更改（每次在 API 中更改时都应更新值）。

在我的服务中，我添加了一个Observable 来从 API 获取数据：

getData(): Observable<any[]> {
  return this.http.get(url)
    .map(res => res.json());
}

我在我的constructor 中调用它来更新list: any = [];：

constructor(http: Http) {
  this.list = this.getData();
}

然后，在我的 HTML 中，我尝试使用 ngFor 显示该数据：

<div *ngFor="let item of list | async">
  <h1>{{item.value}}</h1>
</div>

但是，正在显示任何数据。如果我尝试在map 中输入console.log(res)，我也一无所获。关于我在这里做错了什么的任何想法？

编辑：在遵循 Ivaro 的建议后，AsyncPipe 出现错误。但是，如果我删除它，我如何才能在 API 更改时更新数据？我之前使用过Observal.interval，但我不想在定义的时间间隔内调用 API。我希望它监视更改并相应更新。

这是我的数据结构，顺便说一句：

[{
  "name": "apple",
  "value" 2
}, {
  "name": "banana",
  "value" 10
}]

【问题讨论】：

return this.http.get(url) .map(res => {return res.json();});
并导致您在构造函数中传递列表的 Observable 而不是列表本身：this.getData().subscribe(response => { this.list = response; });
在您的构造函数中this.list = this.getData();，但您使用的是let item of service.list，您在哪里定义this.service？
@echonax 是的，它的定义是因为我只是从另一个组件调用该服务。
我尝试了@Ivaro18 的建议，我得到了Invalid argument '[object Object]' for pipe 'AsyncPipe'。

【解决方案1】：

必须订阅一个 observable。由于它是异步的，因此它返回未定义，这就是在您的代码中分配给this.list 的内容。而是订阅：

constructor(http: Http) {
  this.getData().subscribe(
        res => this.list = res,
        err = > console.log(err) /*handle error*/
    );
}

要使 | async 管道正常工作，请使用 (list | async)（这不需要任何来自 observable 的订阅，因为 async 管道在内部订阅）

<div *ngFor="let item of (list | async)">
  <h1>{{item.value}}</h1>
</div>

括号是必需的，因为从左到右执行，let item of list 将被执行，它没有所需的数据。所以，( list | async ) 使它在list 中具有适当的价值。

【讨论】：

【解决方案2】：

您正在寻找的解决方案通常称为Observable Data Services。

【讨论】：