angular - 带有步进器 ExpressionChangedAfterItHasBeenCheckedError Angular 8 的 ViewChild

Question

我正在尝试使用 ViewChild 为 Stepper [已完成] 属性获取子组件的属性，但我不知道如何修复“ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。以前的值:'已完成:null”。当前值:“已完成:false”。

我遵循了这个答案:Angular Material Stepper Component For Each Step

parent component .ts
@ViewChild(FirstStepComponent, {static: false}) firstStepComp: FirstStepComponent;

get firstStepCompleted() {
    return this.firstStepComp ? this.firstStepComp.completed : null;
}

parent component .html
<mat-step [completed]="firstStepCompleted">
  <app-first-step>
  </app-first-step>
</mat-step>

in the child component .ts
completed: boolean = false;

Answer 1

首先我必须告诉你这个错误只会在 dev 模式下抛出。如果您在 bootstrapping 应用程序时调用 enableProdMode()，它不会被抛出。这主要不会发生在 dev 模式下，因为在每次保存之后，angular 都会运行它的轮次 changeDetection 循环，并用它仔细检查它的 bindings 天气如果它与初始值相比发生了变化。

关键思想:任何改变bindings的东西都需要经历一个changeDetection

循环

For furthermore elaboration on this issue please go through @drew moore's answer here.