Angular2 Dati asincroni Numero

Question

Possiedo un componente che dipende da un oggetto con recupero asincrono. Ci sono anche componenti figlio nel modello che si basano su alcuni dati di questo stesso oggetto.

Il problema che sto avendo sembra essere una classica condizione di gara, ma non sono abbastanza familiare con Angular 2 per capire la soluzione.

Prendete questo per esempio:

export class SampleComponent { 
    constructor(service: SomeService) { 
     this.service = service; 
     this._loadData(); 
    } 

    private _loadData() { 
     this.service.getData().subscribe(data => this.data = data); 
    } 
} 

Ma nel modello, devo componenti figlio da mostrare alcune parti del this.data:

<taglist tags="data?.tags"></taglist> 

Ora il componente per taglist sembra qualcosa di simile:

@Component({ 
    selector: 'taglist', 
    directives: [NgFor], 
    inputs: ['tags'], 
    template: `<span *ngFor="#tag of tags">{{ tag }}</span>` 
}) 

export class TagList { 
    public tags: Array<string> = []; 

    constructor() { 
     // 
    } 
} 

Perché i tag di input sono ricevuti da un set di dati caricato asincrono, non è presente quando il Componente Tag è inizializzato. Cosa posso fare in modo che al termine del caricamento di this.data i componenti secondari che lo utilizzano accedano automaticamente ai dati appena caricati?

Grazie per qualsiasi suggerimento che potresti essere in grado di fornirmi!

Answer 1

Implementare ngOnChanges() (https://angular.io/docs/ts/latest/api/core/OnChanges-interface.html)

@Component({ 
    selector: 'taglist', 
    inputs: ['tags'], 
    template: `<span *ngFor="let tag of tags">{{ tag }}</span>` 
}) 

export class TagList { 
    public tags: Array<string> = []; 

    constructor() { 
     // 
    } 

    ngOnChanges(changes: {[propName: string]: SimpleChange}) { 
     console.log('ngOnChanges - tags = ' + changes['tags'].currentValue); 
    } 
} 

Per angolare per gestire il legame utilizzare anche

<taglist [tags]="data?.tags"></taglist> or <taglist tags="{{data?.tags}}"></taglist> 

altrimenti è una semplice stringa attribuire assegnazione angolare non gestisce.

Answer 2

Questo è il solito caso d'uso per il tubo integrato async, che deve essere utilizzato per consumare facilmente osservabili.

Provate quanto segue, prima creare un getter che restituisce direttamente il livello di servizio osservabile:

get data(): Observable { 
    return this.service.getData(); 
} 

Quindi è possibile consumare questo osservabile direttamente nel modello utilizzando il async pipe:

<span *ngFor="let tag of data | async">{{ tag }}</span>