asynchronous - Angular2 Async Data Issue -
i have component reliant upon asynchronously fetched object. there child components in template rely on data same object.
the problem having seems classic race condition, i'm not familiar enough angular 2 understand solution.
take instance:
export class samplecomponent { constructor(service: someservice) { this.service = service; this._loaddata(); } private _loaddata() { this.service.getdata().subscribe(data => this.data = data); } } but in template, have child components display parts of this.data:
<taglist tags="data?.tags"></taglist> now component taglist looks like:
@component({ selector: 'taglist', directives: [ngfor], inputs: ['tags'], template: `<span *ngfor="#tag of tags">{{ tag }}</span>` }) export class taglist { public tags: array<string> = []; constructor() { // } } because tags input received async loaded dataset, not present when tag component initialized. can when this.data load finished, sub components use automatically access newly loaded data?
thank insight may able provide me!
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); } } for angular handle binding use
<taglist [tags]="data?.tags"></taglist> or <taglist tags="{{data?.tags}}"></taglist> otherwise it's simple string attribute assignment angular doesn't handle.
Comments
Post a Comment