Angular2 Observable List

Question

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

私はPersonオブジェクトのリストを含むDataServiceを持っています。サービスには、このリストを返す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> 

今、私が代わりにPerson[]リストのObservableを返しますDataServiceに別のゲッターを追加します。私が知りません：

1. どのように、リストのためにObservableを定義しますか。 ObservableをDataServiceプロパティとして定義し、コンストラクタで初期化するか、またはサービスゲッターから新しいObservableを直接返しますか？そして、リストをObservableで包むにはどうすればいいですか？
2. このコンポーネントを使用する方法Observable私のコンポーネントにゲッター？ * 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> 

ここから手に入れたヘルプのDataService）=

をそれを考え出しました https://github.com/jhades/angular2-rxjs-observable-data-services https://coryrylan.com/blog/angular-2-observable-data-services