ViewChild 與 Stepper ExpressionChangedAfterItHasBeenCheckedError Angular 8

Question

我正在嘗試使用 ViewChild 來獲取 Stepper [已完成] 屬性的子組件的屬性，但我不知道如何修復“ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it is checked. Previous value: 'completed: 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循環

有關此問題的進一步詳細說明，請在此處閱讀 @drew moore 的回答。