Angular2 可观察列表

Question

我在 Ionic 应用程序中遇到了一些问题（数据异步更新，但 UI 没有相应更新）。我已经为这个问题挠了很久，现在正试图测试一种不同的方法：使用Observables。但我不确定如何实现它。网络上带有Observables 的教程侧重于使用已经返回Observable 的Http 服务。我的场景如下：

我有一个 DataService 包含 Person 对象的列表。该服务有一个返回此列表的 getter。

export class DataService {
  private _list: Person[] = [];
  get list(): Person[] { return this._list }
}

早些时候，我直接在我的组件中使用这个列表：

<ion-list>
  <ion-item *ngFor="let person of dataService.list">
    {{person.name}}
  </ion-item>
</ion-list>

现在我想向DataService 添加另一个getter，它将返回Person[] 列表中的Observable。我不知道的是：

1. 如何以及在何处为列表定义Observable。我是将Observable 定义为DataService 属性并在构造函数中对其进行初始化，还是直接从服务获取器返回一个新的Observable？以及如何将列表包含在 Observable 中？
2. 如何在我的组件中使用这个Observable getter？ *ngFor="???"
3. 当列表被异步更改时，如何向Observable 发出列表已被修改的信号？

我希望这能解决我的 UI 不更新问题。

Answer 1

想通了=)

数据服务

export class DataService {

    private _list: Person[] = [];
    private _observableList: BehaviorSubject<Person[]> = new BehaviorSubject([]);

    get observableList(): Observable<Person[]> { return this._observableList.asObservable() }

    add(person: Person) {
        this._list.push(person);
        this._observableList.next(this._list);
    }

}

组件模板

<ion-list>
    <ion-item *ngFor="let person of dataService.observableList | async">
        {{person.name}}
    </ion-item>
</ion-list>

从这里获得帮助：

https://dzone.com/articles/how-to-build-angular-2-apps-using-observable-data-1 https://github.com/jhades/angular2-rxjs-observable-data-services https://coryrylan.com/blog/angular-2-observable-data-services