Angular2 Async Data Issue

Question

Mam komponent, który jest zależny od asynchronicznie pobranego obiektu. Istnieją również komponenty potomne w szablonie, które opierają się na niektórych danych z tego samego obiektu.

Problem, który mam, wydaje się być klasycznym warunkiem wyścigowym, ale nie jestem wystarczająco zaznajomiony z Angular 2, aby zrozumieć rozwiązanie.

Weź to na przykład:

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

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

Ale w szablonie mam komponenty podrzędne do wyświetlenia niektórych części this.data:

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

Teraz Komponent dla taglist wyglądał:

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

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

    constructor() { 
     // 
    } 
} 

Ponieważ wprowadzono znaczniki wejściowe z załadowanego asynchronizowanego zestawu danych, którego nie ma, gdy zainicjowano komponent znacznika. Co mogę zrobić, aby po załadowaniu this.data składniki podrzędne, które z niego korzystają, automatycznie uzyskają dostęp do nowo załadowanych danych?

Dziękuję za wszelkie informacje, które możesz mi podać!

Answer 1

Wdrożenie 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); 
    } 
} 

kątowego obsłużyć wiązania również użyć

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

inaczej jest to proste zadanie ciąg kątowe nie obsługuje atrybutów.

Answer 2

Jest to zwykły przypadek użycia wbudowanej rury async, która ma służyć do łatwego używania obserwowalnych przedmiotów.

spróbuj wykonać następujące czynności, najpierw utworzyć getter niż powraca bezpośrednio warstwa serwis do zaobserwowania:

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

Następnie można konsumować to obserwowalne bezpośrednio w szablonie za pomocą rury async:

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