数据绑定导致 ExpressionChangedAfterItHasBeenCheckedError

Question

我是新手 Angular 4. 我有一个数据绑定字段，如下所示。但不知何故，有一个 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}`
  }
}

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

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

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

请帮忙！！

请参考博主：https://plnkr.co/edit/16atvKgf2BA6z2OjqT6h?p=preview

Answer 1

如 Everything you need to know about change detection in Angular one of the operations that Angular performs is DOM update. This includes both interpolations and bindings updates. Angular performs these operations for each DOM in the order they are found in the template. These operations are explained in the 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 绑定。因此它将 h2 更新为 Hello 并记住空字符串值。然后它继续更新 input - [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>

数据绑定导致 ExpressionChangedAfterItHasBeenCheckedError

Data Binding causes ExpressionChangedAfterItHasBeenCheckedError

angular2-databinding

angular