Angular2 Observable List

Question

Sono in esecuzione alcuni problemi nella mia applicazione Ionica (dati aggiornati in modo asincrono ma l'interfaccia utente non si aggiorna di conseguenza). Mi sono graffiato a lungo su questo problema e ora sto provando a testare un approccio diverso: usando Observables. Ma non sono sicuro di come implementarlo. Esercitazioni con Observables sulla messa a fuoco sull'utilizzo del servizio Http che restituisce già un valore Observable. Il mio scenario è il seguente:

Ho un DataService contenente un elenco di oggetti Person. Il servizio ha un getter che restituisce questa lista.

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

In precedenza, sono stato direttamente utilizzando questa lista nei miei componenti:

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

Ora voglio aggiungere un altro getter al DataService che restituire un Observable della lista Person[] invece. Quello che non so è:

1. Come e dove definire un Observable per l'elenco. Devo definire un Observable come una proprietà DataService e inizializzarlo nel costruttore o restituire un nuovo Observable direttamente dal getter di servizio? E come faccio a racchiudere l'elenco in un Observable?
2. Come utilizzare questo getter Observable nel mio componente? * NgFor = "???"
3. Quando l'elenco viene modificato in modo asincrono, come faccio a segnalare allo Observable che l'elenco è stato modificato?

Spero che questo risolva i miei problemi di aggiornamento non dell'interfaccia utente.

Answer 1

capito =)

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

} 

Template Componente

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

Got aiuto da qui:

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