javascript - Angular 2 : Expression has changed after it was checked on accessing child component property

Question

我有两个选项卡组件，它们传递相同的模型数据但使用自定义管道进行过滤:

<md-tab-group>
    <md-tab label="All ({{ allPeople.count }})">
        <tab-content #allPeople [content]="data"></tab-content>
    </md-tab>

    <md-tab label="Tennagers ({{ teenagers.count }})">
        <tab-content #teenagers [content]="data | filterByAge: 20"></tab-content>
    </md-tab>
</md-tab-group>

在父组件上，我想访问子组件的属性。如您所见，我正在使用 ID 连接:{{ allPeople.count }}

在子组件上，我有 ngOnChanges() 方法进行一些计算并返回 count 属性:

ngOnChanges() {
    this.count = this.countPeople();
}

使用这种方法，它可以工作，但会出现以下控制台错误:

Expression has changed after it was checked. Previous value: 'All (0)'. Current value: 'All (4)'.

我知道它只出现在开发模式中，但我也知道这不是一个好的做法。当我进行相同的更改时，还有另一种方法可以访问子属性 count 吗？

这是一个工作示例:https://plnkr.co/edit/YlKxh81ejJF7zofc4310?p=preview

Answer 1

当更改检测导致模式更改时，您会收到此错误。因为 ngOnChanges() 是由变化检测调用的，所以这可能是导致您的情况出现错误的原因。您可以解决在更新后显式调用更改检测的问题。

constructor(private cdRef:ChangeDetectorRef) {}

ngOnChanges() {
    setTimeout(() => this.count = this.countPeople());
    // this.cdRef.detectChanges();
}

我不知道为什么 detectChanges() 在您的情况下不起作用，但 setTimeout() 却起作用。我假设它与其他组件相关，具体取决于更改。 detectChanges 仅适用于当前组件。