Angular2 Async Data Issue

Question

Ich habe eine Komponente, die auf ein asynchron abgerufenes Objekt angewiesen ist. Es gibt auch untergeordnete Komponenten in der Vorlage, die auf Daten von demselben Objekt beruhen.

Das Problem, das ich habe, scheint eine klassische Race-Bedingung zu sein, aber ich bin nicht genug vertraut mit Angular 2, um die Lösung zu verstehen.

Nehmen Sie dies zum Beispiel:

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

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

Aber in der Vorlage, ich habe Kind Komponenten bestimmte Teile this.data anzuzeigen:

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

Nun ist die Komponente für taglist sieht ungefähr so ​​aus:

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

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

    constructor() { 
     // 
    } 
} 

Weil Tags eingegeben werden von einem asynchronen geladenen Dataset ist es nicht vorhanden, wenn die Tag-Komponente initialisiert wird. Was kann ich tun, damit nach dem Laden von this.data die Subkomponenten, die es verwenden, automatisch auf die neu geladenen Daten zugreifen?

Vielen Dank für alle Einblicke, die Sie mir möglicherweise bieten können!

Answer 1

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

Für Winkel die Bindung auch

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

sonst ist es ein einfacher String Angular behandelt nicht zuzuschreiben Zuweisung verwenden zu handhaben.

Answer 2

Dies ist der übliche Anwendungsfall für die eingebaute async Pipe, die verwendet werden soll, um Observable einfach zu konsumieren.

die folgenden Versuchen Sie, erstellen Sie zuerst einen Getter als Erträge direkt die Service-Schicht beobachtbar:

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

Dann können Sie diese beobachtbaren direkt in der Vorlage verbrauchen mit dem async Rohr: Ich

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