ERROR Error: ExpressionChangedAfterItHasBeenCheckedError:

Question

我有一个很好的直觉，为什么这里会发生这个错误：

https://stackblitz.com/edit/angular-qjajn1?file=.angular-cli.json

<mat-button-toggle-group multiple #t="matButtonToggleGroup" (change)="d($event)">
    <mat-button-toggle checked *ngFor="let f of features" [value]=f>{{f}}</mat-button-toggle>
</mat-button-toggle-group>

<mat-checkbox
    [checked]="t.value.length == features.length"
    [indeterminate]="t.value.length && !(t.value.length == features.length)"
    (change)="$event.checked ? t.value = features : t.value = [];"
    color="primary"
> all </mat-checkbox>

我正在更改模板中的内容 "after view initialization"。是否有消除此错误的模板驱动解决方案？

我知道如何通过将代码添加到我的 *.TS 文件来解决这个问题。在 AfterViewInit 等中调用更改检测，或在复选框上使用反应式表单模型并将值设置为 true。

有没有办法在模板中完全解决这个问题？

无论如何它都能正常工作，在生产中我不会得到那个错误。

Answer 1

使用组件参数而不是模板引用避免此错误：

将值添加到组件：

 value = this.features;

模板：

<mat-button-toggle-group multiple (change)="d($event)" [(ngModel)]="value">
    <mat-button-toggle checked *ngFor="let f of features" [value]=f>
     {{f}}
    </mat-button-toggle>
</mat-button-toggle-group>

<mat-checkbox 
[checked]="value?.length === features.length" 
[indeterminate]="value.length && !(value.length === features.length)"
 (change)="$event.checked ? value = features : value = []" 
 color="primary">
  all 
</mat-checkbox>

Running example

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError:

angular

angular-changedetection