Angular2 Observable List

Question

Występują pewne problemy w mojej aplikacji jonowej (dane aktualizowane asynchronicznie, ale interfejs użytkownika nie jest odpowiednio aktualizowany). Długo podrapałem się po tej kwestii, a teraz próbuję przetestować inne podejście: używając Observables. Ale nie jestem pewien, jak to wdrożyć. Samouczki z Observables w sieci skupiają się na korzystaniu z usługi Http, która już zwraca wartość Observable. Mój scenariusz jest następujący:

Mam DataService zawierający listę obiektów Person. Usługa ma getter, który zwraca tę listę.

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

Wcześniej byłem bezpośrednio z tej listy w moich elementów:

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

Teraz chcę dodać kolejny getter do DataService że wróci się Observable listy Person[] zamiast. To, czego nie wiem, to:

1. Jak i gdzie zdefiniować Observable dla listy. Czy definiuję właściwość Observable jako właściwość DataService i inicjalizuję ją w konstruktorze, czy też zwracam nową wartość Observable bezpośrednio z programu pobierającego usługi? A jak mogę zawinąć listę w Observable?
2. Jak korzystać z tego gettera Observable w moim komponencie? * ngFor = "???"
3. Kiedy lista zostanie zmieniona asynchronicznie, w jaki sposób mogę zasygnalizować Observable, że lista została zmodyfikowana?

Mam nadzieję, że rozwiąże to moje problemy z aktualizowaniem interfejsu użytkownika.

Answer 1

Zdobione =)

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

} 

Komponent Szablon

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

otrzymał pomoc stąd:

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