步进式ExpressionViewdChangedAfterItHaHasBeenCheckedError的ViewChild Angular 8

Question

我正在尝试使用ViewChild来获取Stepper [completed]属性的子组件属性，但是我不知道如何解决“ ExpressionChangedAfterItHaHasBeenCheckedError：表达式在检查后已更改。上一个值：”已完成：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模式下会引发此错误。如果您在enableProdMode()应用程序时调用bootstrapping，则不会抛出该应用程序。主要在dev模式下不会发生这种情况，因为在每个保存角度之后，它们将运行changeDetection个循环，并与它再次检查bindings的天气是否与初始角度有所变化。 / p>

主要思想：任何更改bindings的内容都需要经历changeDetection的周期

  

有关此问题的详细说明，请通过@drew   摩尔的答案here。