कोणीय 2 Async डेटा समस्या

Question

मेरे पास एक घटक है जो एक असीमित रूप से प्राप्त वस्तु पर निर्भर है। टेम्पलेट में बाल घटक भी हैं जो इस वस्तु से कुछ डेटा पर भरोसा करते हैं।

मुझे जो समस्या हो रही है वह क्लासिक रेस की स्थिति प्रतीत होती है, लेकिन समाधान को समझने के लिए मैं कोणीय 2 के साथ पर्याप्त परिचित नहीं हूं।

उदाहरण के लिए यह लो:

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

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

लेकिन टेम्पलेट में, मैं बच्चे घटकों this.data के कुछ भागों प्रदर्शित करने के लिए:

:

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

अब taglist के लिए घटक तरह दिखता है

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

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

    constructor() { 
     // 
    } 
} 

क्योंकि टैग इनपुट प्राप्त होता है एसिंक लोड किए गए डेटासेट से, यह तब मौजूद नहीं है जब टैग घटक प्रारंभ होता है। मैं क्या कर सकता हूं कि जब this.data लोड समाप्त हो गया है, तो इसका उपयोग करने वाले उप घटक स्वचालित रूप से नए लोड किए गए डेटा तक पहुंच जाएंगे?

किसी अंतर्दृष्टि के लिए धन्यवाद जो आप मुझे प्रदान करने में सक्षम हो सकते हैं!

Answer 1

लागू 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); 
    } 
} 

बंधन को संभालने के लिए कोणीय के लिए भी

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

का उपयोग अन्यथा यह काम कोणीय हैंडल नहीं करता विशेषता के लिए एक सरल स्ट्रिंग है।

Answer 2

अंतर्निहित async पाइप के लिए यह सामान्य उपयोग केस है, जिसका उपयोग आसानी से अवलोकन करने के लिए किया जाता है।

पहले रिटर्न की तुलना में एक गेटर सीधे सेवा परत नमूदार बनाने निम्नलिखित का प्रयास करें,:

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