web-dev-qa-db-ja.com

Angular2監視可能リスト

Ionicアプリケーションでいくつかの問題が発生しています（データは非同期で更新されますが、UIはそれに応じて更新されません）。この問題について長い間頭を悩ませてきましたが、現在は別の問題をテストしようとしています。アプローチ：Observablesを使用します。しかし、それを実装する方法がわかりません。ネット上でObservablesを使用するチュートリアルでは、すでにHttpを返すObservableサービスの使用に焦点を当てています。私のシナリオは次のとおりです。

DataServiceオブジェクトのリストを含む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>

ここで、DataServiceに別のゲッターを追加して、代わりにPerson[]リストのObservableを返します。私が知らないのは：

  1. リストのObservableを定義する方法と場所。 ObservableをDataServiceプロパティとして定義し、コンストラクターで初期化するのですか、それともサービスゲッターから直接新しいObservableを返すのですか？そして、リストをObservableでラップするにはどうすればよいですか？
  2. このObservableゲッターをコンポーネントで使用するにはどうすればよいですか？ * ngFor = "???"
  3. リストが非同期で変更された場合、リストが変更されたことをObservableに通知するにはどうすればよいですか？

これでUIが更新されない問題が解決することを願っています。

angularobservable
7
AweSIM

それを理解した=）

DataService

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-1https://github.com/jhades/ angle2-rxjs-observable-data-serviceshttps://coryrylan.com/blog/angular-2-observable-data-services

14
AweSIM