Angular 4 : `ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Question

我的子模块中的每个 EventEmiiter 都会出现此错误，我找不到解决方法。

ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。先前的值:“真”。当前值:'false'。

这就是触发我的 EventEmitter 的原因:

ngOnChanges(changes: any) {
    if (changes.groupingTabValid) {
        if (changes.groupingTabValid.currentValue !== changes.groupingTabValid.previousValue) {
            this.groupingTabValidChange.emit(this.groupingTabValid);
        }
    }
}

这是我的“主要”组件的 HTML

<year-overview-grouping [definitionDetails]="definitionDetails"
                        [fixedData]="fixedData"
                        [showValidation]="showValidation"
                        [groupingTabValid]="groupingTabValid"
                        (groupingTabValidChange)="setValidators('groupingTab', $event)">

</year-overview-grouping>

调用这个函数

public setValidators(validator: string, e: boolean) {
    switch (validator) {
        case "groupingTab":             
            this.groupingTabValid = e;
            break;

        case "selectionTab":
            this.selectionTabValid = e;
            break;
    }

    if (this.groupingTabValid && this.selectionTabValid) {
        this.valid = true;
    } else {
        this.valid = false;
    }
}

1) 简单的解释一下，是什么导致了这个错误？

2) 我可以采取什么步骤来解决这个问题？

Answer 1

遵守单向数据流规则

尝试使用 setTimeout 将发射的调用推迟一次

if (changes.groupingTabValid.currentValue !== changes.groupingTabValid.previousValue) {
    setTimeout(() => this.groupingTabValidChange.emit(this.groupingTabValid), 0)
}