Angular 8中使用ViewChild和Stepper时出现ExpressionChangedAfterItHasBeenCheckedError错误

Question

我试图使用ViewChild获取子组件属性，用于Stepper [completed] 属性，但我无法解决“ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。之前的值：'completed：null'。当前值：'completed：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;

- Daniel Ishitani

---

你是否对这个[completed]="firstStepComp?.completed"感到疲倦了？ - Ashot Aleqsanyan

我有同样的问题。 - Daniel Ishitani

Answer 1

首先我要告诉你的是，这个错误只会在dev模式下抛出。如果在启动应用程序时调用enableProdMode()，它就不会被抛出。这主要不会在dev模式下发生，因为在每次保存后，Angular都会运行其一系列changeDetection周期，并且双重检查其是否从初始状态更改了bindings。

关键思想：任何更改bindings的内容都需要经过一轮changeDetection周期。

如需进一步阐述此问题，请参阅@drew moore的答案here。

- Selaka Nanayakkara