Question

我需要进行RESTful调用并使用Angular 2监视更改（每次更改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>

但是，正在显示任何数据。如果我在console.log(res)尝试map，我也没有得到任何结果。我在这里做错了什么想法？

编辑：按照Ivaro的建议后，我收到了AsyncPipe的错误消息。但是，如果我删除它，如何在API更改时获取数据？之前我使用的是Observal.interval，但我不想在定义的时间间隔内调用API。我希望它能够观察变化并相应地进行更新。

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

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

Answer 1

必须订阅一个observable。由于它是异步的，因此返回undefined，即在代码中分配给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中具有适当的值。

Answer 2

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