Angular2 “expression has changed after it was checked” 异常

Question

我的模板中有以下按钮:

<button type="button" class="mgmButton" (click)="onSave()" [disabled]="saveDisabled()">Save</button>

该按钮根据 saveDisabled 函数的结果被禁用。

saveDisabled(): boolean {
    this.validationMessage = '';
    for (var i = 0; i < this.tableData.length; i++) {
        let row = this.tableData[i];
        if (row.edit) {
            if (row.data.roleCode == null || row.data.roleCode == '' ||
                row.data.grantProgramCode == null || row.data.grantProgramCode == '') {
                this.validationMessage = 'Row ' + (i + 1) + ' has not filled in all required fields. ';
            }
        }
    }

    if(this.validationMessage == '') {
        return false;
    } else {
        return true;
    }

该函数的早期版本没有构建validationMessage，它只是返回true 或false。这工作没有任何错误。但是，当我将 validationMessage 属性添加到方法/组件/模板时，我开始收到“检查后表达式已更改”异常。

根据其他帖子，看起来会发生这种情况，因为我正在更改 validationMessage 变量，而更改检测仍在发生。我不确定我是否完全理解正在发生的事情或摆脱错误的最佳方法。

更新:

我创建了一个自定义验证器，它几乎可以完美运行。

我的组件有一个名为 tableData 的数据数组。 tableData 中的每一行都是一个对象，在模板的 html 表中显示为一行。有时一行处于只读模式，有时数据处于编辑模式，因此行中的某些列是输入字段、选择下拉列表等。

自定义验证器应用于表单标签。它将 tableData 作为输入。我所有的验证逻辑都有效，如果验证器返回错误，我会在模板中显示它。 (我确实必须将 tableData 转换为 json 字符串，然后对其进行解析以使组件和验证器之间的切换正常工作。)

但是时间上好像有问题。假设给定的行处于编辑模式，并且用户更改了选择菜单的值。此选择绑定(bind)到 tableData 行之一中的属性。表单中的验证被触发了，但是传入的数据有select的旧值，而不是新值。本质上，表单的验证发生在表行上的数据绑定(bind)更新支持对象之前。

Answer 1

我通过从 Angular 核心添加 ChangeDetectionStrategy 来解决。

import {  Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'page1',
  templateUrl: 'page1.html',
})