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

这是内置<script type="text/javascript" src="http://localhost:3000/static/bundle.js"></script>管道的常用用例，用于轻松使用observable。

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

async

然后，您可以使用get data(): Observable { return this.service.getData(); }管道直接在模板中使用此observable：

async

Angular2异步数据问题

2 个答案: