Angular2异步数据问题

Question

我有一个依赖于异步获取对象的组件。 模板中还有一些子组件依赖于同一对象中的某些数据。

我遇到的问题似乎是一个典型的竞争条件，但我对Angular 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>

否则它是一个简单的字符串属性赋值Angular不处理。

Answer 2

这是内置async管道的常用用例，用于轻松使用observable。

尝试以下方法，首先创建一个getter而不是直接返回服务层observable：

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

然后，您可以使用async管道直接在模板中使用此observable：

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