Angular 在“我的表”组件中签入表达式后，该表达式已更改

我已经构建了一个表组件ez table，它允许您将模板传递给列以呈现当前项。这一切都很好，但由于某种原因，当我有一个表单字段，它有一个依赖于另一个表单字段中的数据的验证属性时，我会得到错误

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.
Previous value: 'ng-valid: true'. Current value: 'ng-valid: false'.

如果更改一个字段的值会使另一个字段无效

在以下示例中，如果行上的一个字段具有值，则另一个字段将成为必需字段

<form #form="ngForm">
  <ez-table [data]="rows">
    <ez-column heading="Val 1" property="val1">
      <ng-template let-row let-i="index">
        <input [name]="'val1_' + i" [(ngModel)]="row.val1" [required]="!!row.val2">
      </ng-template>
    </ez-column>
    <ez-column heading="Val 2" property="val2">
      <ng-template let-row let-i="index">
        <input [name]="'val2_' + i" [(ngModel)]="row.val2" [required]="!!row.val1">
      </ng-template>
    </ez-column>
  </ez-table>
  Valid: {{ form.valid | json }}
</form>

有效：{form.Valid | json}

我无法理解为什么在我的表组件中会发生这种情况，因为我可以在没有组件的情况下执行完全相同的操作，并且不会出现错误

此表正在执行完全相同的操作，但在一个字段中输入数据不会触发错误，但会更新表单的有效性

<form #form2="ngForm">
  <table>
    <thead>
      <tr><th>Val 1</th><th>Val 2</th></tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of rows2;index as i">
        <td>
          <ng-container *ngTemplateOutlet="editTemplate1;context:{ $implicit: row, index: i }">
          </ng-container>
        </td>
        <td>
          <ng-container *ngTemplateOutlet="editTemplate2;context:{ $implicit: row, index: i }">
          </ng-container>
        </td>
      </tr>
    </tbody>
  </table>

  Valid: {{ form2.valid | json }}

  <ng-template #editTemplate1 let-row let-i="index">
    <input [name]="'val1_' + i" [(ngModel)]="row.val1" [required]="!!row.val2">
  </ng-template>

  <ng-template #editTemplate2 let-row let-i="index">
    <input [name]="'val2_' + i" [(ngModel)]="row.val2" [required]="!!row.val1">
  </ng-template>
</form>

Val 1Val 2
有效：{form2.Valid | json}

这是一场闪电战

表组件的源代码位于

---

在组件中添加检测更改

修正：

从“@angular/core”导入{Component，ChangeDetectorRef}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
rows=Array.from（{length:5}，（）=>（{}））；
rows2=Array.from（{length:5}，（）=>（{}））；
构造函数（私有changeDetection:ChangeDetectorRef）{}
ngAfterContentChecked（）{
this.changeDetection.detectChanges（）；
}
}

在组件中添加检测更改

修正：

从“@angular/core”导入{Component，ChangeDetectorRef}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
rows=Array.from（{length:5}，（）=>（{}））；
rows2=Array.from（{length:5}，（）=>（{}））；
构造函数（私有changeDetection:ChangeDetectorRef）{}
ngAfterContentChecked（）{
this.changeDetection.detectChanges（）；
}
}

或者，您可以尝试在.ts文件的

@component

指令中使用

变更检测：变更检测策略。OnPush

已经尝试过了。或者，您可以尝试在.ts文件的

@component

指令中使用

变更检测：变更检测策略。OnPush

已经尝试过了