可见在Angular 2中不显示数据

Question

I need to make a RESTful call and watch for changes using Angular 2 (the values should be updated every time it changes in the API).

In my service, I've added an Observable to get the data from the API:

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

I call that in my constructor to update list: any = []; :

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

Then, in my HTML, I'm trying to display that data using ngFor :

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

However, any data is being displayed. If I try to console.log(res) in map , I also don't get anything. Any ideas of what I'm doing wrong here?

EDIT: After following Ivaro's suggestion, I'm getting an error with the AsyncPipe . However, if I remove it, how can I get the data to be updated when the API changes? I was using Observal.interval before, but I didn't want to call the API at a defined interval. I wanted it to watch for changes and update accordingly.

Here's my data structure, btw:

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

Answer 1

An observable must be subscribed. Since it is asynchronous, it returns undefined, and that is what is being assigned to this.list in your code. Instead subscribe:

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

Edit:

For the | async | async pipe to work, use (list | async) (this doesn't need any subscription from observable as the async pipe internally subscribes)

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

The parentheses are required since execution happens from left to right and let item of list will be executed, which doesn't have required data. So, ( list | async ) makes it have proper value in list .

Answer 2

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