Question

我在我的Ionic应用程序中遇到了一些问题（数据异步更新，但UI没有相应更新）。我已经在这个问题上摸不着头脑了，现在我正在尝试测试一种不同的方法：使用Observables。但我不确定如何实施它。网上Observables的教程专注于使用已经返回Http的{{1}}服务。我的方案如下：

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

Person

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

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>添加另一个getter，它将返回DataService列表的Observable。我不知道的是：

如何以及在何处为列表定义Person[]。我是否将Observable定义为Observable属性并在构造函数中初始化它，还是直接从服务获取器返回新的DataService？如何将列表包装在Observable？
如何在我的组件中使用此Observable getter？ * ngFor =＆＃34; ???＆＃34;
当列表异步更改时，如何向Observable发信号通知列表已被修改？

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

Answer 1

想出来=）

<强>的DataService

.figure-wrapper { text-align: centre; }

组件模板

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);
    }

}

从这里得到帮助：

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

Angular2可观察名单

1 个答案: