angular - 数据绑定(bind)导致 ExpressionChangedAfterItHasBeenCheckedError

Question

我是 Angular 4 的新手。我有一个如下所示的数据绑定(bind)字段。但不知何故，有一个 ExpressionChangedAfterItHasBeenCheckedError。

<form>
<div>
  <h2>Hello {{input.value}}</h2>
  <input type="text" [value]="input.value" name="inputTest"/>
  <input type="text" #input [value]="name"/>
</div>
<button type="submit">submit</button>
</form>

下面是一个简单的构造器:

export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}

我看了很多关于这个错误的帖子，我还是不明白为什么一个简单的数据绑定(bind)会导致这个错误。

我尝试了下面的代码，但没有用。

ngAfterViewInit() {
    console.log("ngAfterViewInit");
    this.cd.detectChanges();
}

请帮忙!!

请引用plunker:https://plnkr.co/edit/16atvKgf2BA6z2OjqT6h?p=preview

Answer 1

如 Everything you need to know about change detection in Angular 中所述Angular 执行的操作之一是 DOM 更新。这包括插值和绑定(bind)更新。 Angular 按照它们在模板中找到的顺序为每个 DOM 执行这些操作。 The mechanics of DOM updates in Angular 中解释了这些操作.

您的模板如下所示:

  <h2>Hello {{input.value}}</h2>
  <input type="text" #input [value]="name"/>

因此 Angular 开始更新 DOM 并首先对 h2 元素执行更新。它将 {{input.value}} 评估为空字符串，因为它尚未更新 input 上的 value 绑定(bind)。因此它将 h2 更新为 Hello 并记住空字符串值。然后它继续更新 input 的绑定(bind) - [value]="name" 并将其值设置为 Angular! v4.3.1。变更检测在此阶段完成。

然后它运行验证阶段，如 Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error 中所述.在验证阶段，Angular 评估 {{input.value}} 并将其与之前的值进行比较。由于输入已被处理，因此表达式计算为 Angular! v4.3.1，它不同于在更改检测期间用于 h2 元素的空字符串。所以你得到一个错误:

Expression has changed after it was checked. Previous value: ''. Current value: 'Angular! v4.3.1'.

这也意味着，如果您更改模板中元素的顺序，您将不会看到任何错误。这工作正常:

<input type="text" #input [value]="name"/>
<h2>Hello {{input.value}}</h2>