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();
}

请帮助!!

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

Answer 1

正如Everything you need to know about change detection in Angular中所解释的那样，Angular执行的一项操作是DOM更新。这包括插值和绑定更新。 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}}评估为空字符串，因为它尚未更新value上的input绑定。因此，它会将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元素的空字符串不同。所以你得到一个错误：

检查后表情发生了变化。以前的价值：''。当前价值：'Angular！ v4.3.1' 。

这也意味着如果您更改模板中元素的顺序，您将看不到错误。这没关系：

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

数据绑定导致ExpressionChangedAfterItHasBeenCheckedError

1 个答案: