来自 Angular 的 ExpressionChangedAfterItHasBeenCheckedError

Question

这是我原来的问题的延续

stackoverflow.com/questions/44596418/angular-throws-expressionchangedafterithasbeencheckederror-with-textarea

这仍然没有解决。我重新创建了原始 plunkr 来模拟实际项目，发现它与 textarea 无关。

当我通过单击列表中的项目进入详细信息页面时，抛出异常 ExpressionChangedAfterItHasBeenCheckedError。仅当 src/detailitems.ts 的 CodeView 在数组中有多个元素时才会发生这种情况。 CodeView 项以详细形式定义字段。

import { FormBase } from './formbase'
import { ItemBase, TextboxItemBase } from './itembase'

export class CodeView extends FormBase {

    static getItems() :ItemBase[] {

    let items: ItemBase[] = [

        new TextboxItemBase(
            {
                key: 'id',
                label: 'ID',
                value: '',
                required: true,
                enabled: false,
                readOnly: true,
                size: 36
            }
        )
,
        new TextboxItemBase(
            {
                key: 'description',
                label: 'Description',
                required: true,
                size: 20

            }
        )            
    ];

    return items;
}

}

如果我修改代码使 CodeView 只有 1 项，那么异常就会消失。

Exception Plunkr

No Exception Plunkr（仅详细一项）

Answer 1

您的错误来自A-Item 组件，更准确地说来自此节点

<div [formGroup]="form"

当你有这样的绑定时，angular 会自动创建NgControlStatusGroup 指令，根据控制状态（有效/无效/脏/等）设置 CSS 类。

export const ngControlStatusHost = {
  '[class.ng-untouched]': 'ngClassUntouched',
  '[class.ng-touched]': 'ngClassTouched',
  '[class.ng-pristine]': 'ngClassPristine',
  '[class.ng-dirty]': 'ngClassDirty',
  '[class.ng-valid]': 'ngClassValid', // you get error in this binding
  '[class.ng-invalid]': 'ngClassInvalid',
  '[class.ng-pending]': 'ngClassPending',
};

第一次你没有为你的控件提供任何价值。这就是为什么您的表单的valid 属性是false。然后您在更改检测周期中使用ngModel 填充它，并且表单变得有效。 form 的有效属性是根据您的所有控件计算得出的。如果您只有一个控件，则有效属性将仅取决于一个控件，A-Item 组件不会引发错误。

我会在渲染之前准备数据。

你可以打开form.component.ts，找到如下代码

this.formItems.forEach(item => {
   group[item.key] = item.BuildControl();
   this.items.push(new formObjectItem(item, this.getData(item.key)));
});

那么你需要为表单打补丁

this.formItems.forEach(item => {
   group[item.key] = item.BuildControl();
   this.items.push(new formObjectItem(item, this.getData(item.key)));
   group[item.key].patchValue(this.getData(item.key)); // <== this line
});

或

this.formItems.forEach(item => {
   group[item.key] = item.BuildControl();
   const value = this.getData(item.key);
   this.items.push(new formObjectItem(item, value));
   group[item.key].patchValue(value);
});

这样您的表单将与您的值同步并具有正确的状态。

在这种情况下，您还可以从 A-Item 组件中删除 itemValue 和 ngModel，因为响应式模型将完成所有工作。

Forked Plunker

你不会得到这样的错误

还有一个提示：

import * as Rx from 'rxjs/Rx'

您会将所有 rxjs 库发送到您的捆绑包中