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
を返します。私が知らないのは:
Observable
を定義する方法と場所。 Observable
をDataService
プロパティとして定義し、コンストラクターで初期化するのですか、それともサービスゲッターから直接新しいObservable
を返すのですか?そして、リストをObservable
でラップするにはどうすればよいですか?Observable
ゲッターをコンポーネントで使用するにはどうすればよいですか? * ngFor = "???"Observable
に通知するにはどうすればよいですか?これでUIが更新されない問題が解決することを願っています。
それを理解した=)
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