带有动态清晰度选项卡的 Angular 表单在添加选项卡后获取 ExpressionChangedAfterItHasBeenCheckedError

Question

I have reactive angular form with dynamic tabs. First - tabs with fields, then tab with button for add tab. If I add tab in form, I get error ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'active: true'. Current value: 'active: false'.

It's clarity changed tab activated status, so I get this error. Tried use setTimeout - in delete tab it's working - have no error. But in adding - it's showed sometimes - offten when active tab not last. And sometimes I get activated addTab - but I change it to false manually.

onAdd(event) {
  event.stopPropagation();
  const info = this.listGroupDef();
  this.infoList.push(this.fb.group(info));
  this.infoList.markAsDirty();
  this.tabs.push(false);
  setTimeout(() => {
    this.addTab = false;
    this.tabs[this.tabs.length - 1] = true;
  }, 0);
}
onDelete(event, index: number) {
  setTimeout(() => {
    if (this.tabs[index]) {
      this.tabs[0] = true;
    }
    this.tabs.slice(index, 1);
    this.infoList.removeAt(index);
    }, 0);
  event.stopPropagation();
  }

<clr-tabs>
  <clr-tab *ngFor="let InfoFormGroup of InfoList.controls; let infoIndex = index">
    <button clrTabLink>title<clr-icon shape="times" (click)="onDelete($event, infoIndex)"></clr-icon></button>
    <ng-template [(clrIfActive)]="tabs[infoIndex]">
      <clr-tab-content>
        angular reactive form
      </clr-tab-content>
    </ng-template>
  </clr-tab>
  <clr-tab>
    <button clrTabLink (click)="onAdd($event)"><clr-icon shape="plus-circle"></clr-icon></button>
    <ng-template [(clrIfActive)]="addTab">
      <clr-tab-content>
      </clr-tab-content>
    </ng-template>
  </clr-tab>
</clr-tabs>

Answer 1

Could you please provide any additional information about your project? There are three main reasons when this error appears:

1. You are executing code in AfterViewInit which often happens when working with ViewChild, as it is undefined until AfterViewInit is called.

2. You are manipulating the DOM directly (eg using jQuery). Angular cannot always detect these changes and react properly.

3. It can also happen due to race conditions when you are calling functions inside your HTML template.

Please follow these three rules and detect corresponding points in you app.

Answer 2

Your error says it all that there is the change happen which angular's change detector did not record.

Please read the following blog it explains the ChangeDetectionStrategy

https://blog.angularindepth.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f

In your code you could explicitly call the detectChanges method after your active property is changed.