FormArray获取ExpressionChangedAfterItHaHasBeenCheckedError

Question

我有一个FormArray，其中传递了IsEditMode：boolean标志，以将视图从“编辑”模式切换到“只读”模式。

当我更改IsEditMode的值时，出现错误

  

错误错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：'ngIf：false'。当前值：'ngIf：true'

我尝试查找示例，但找不到任何内容。请提出是否还有更好的方法可以做到这一点。

createForm(): void {
    this.itemForm = this.fb.group({
      items: this.fb.array([])
    });
  }

  createItem(jp: Item & EditMode): FormGroup {
    return this.fb.group({
      id: jp.id,
      profileId: jp.profileId,
      name: [jp.name, Validators.required],
      isEditMode: [jp.isEditMode]
    });
  }

addNewItem() {
    this.items = this.jobPreferenceForm.get(
      'items'
    ) as FormArray;
    this.items.push(
      this.crateItem({
        id: 0,
        profileId: '',
        name: '',
        isEditMode: true
      })
    );
  }

<table class="table table-condensed table-striped table-hover">
            <tbody>
              <tr formArrayName="items" *ngFor="let item of itemForm.get('items').controls; let i = index;">
                <td>
                  <span *ngIf="!item.value.isEditMode">{{item.value.name}}</span>
                  <div *ngIf="item.value.isEditMode" [formGroupName]="i">
                    <input type="text" class="form-control" formControlName="name">
                  </div>
                </td>
                <td>
                  <a *ngIf="!item.value.isEditMode" (click)="item.value.isEditMode = !item.value.isEditMode">Edit</a>
                  <a *ngIf="item.value.isEditMode" class="text-muted mr-2" [attr.disabled]="!item.valid" (click)="cancel(item)">Cancel</a>
                  <a *ngIf="item.value.isEditMode" class="text-success mr-2" (click)="save(item)">Save</a>
                  <a *ngIf="item.value.isEditMode" class="text-danger">Delete</a>
                </td>
              </tr>
            </tbody>
          </table>