3

我是 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

4

1 回答 1

4

正如您需要了解的关于 Angular 中的更改检测的一切中所解释的，Angular 执行的操作之一是 DOM 更新。这包括插值和绑定更新。Angular 按照它们在模板中的顺序为每个 DOM 执行这些操作。这些操作在 Angular 中的 DOM 更新机制中进行了解释。

您的模板如下所示：

  <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。变更检测在此阶段完成。

然后它运行验证阶段，如您需要了解的有关ExpressionChangedAfterItHasBeenCheckedError错误的所有信息中所述。在验证阶段，Angular 会评估{{input.value}}并将其与之前的值进行比较。由于已经处理了输入，因此表达式的计算结果与更改检测期间Angular! v4.3.1用于h2元素的空字符串不同。所以你得到一个错误：

检查后表达式已更改。以前的值：''。当前值：'角！v4.3.1'。

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

<input type="text" #input [value]="name"/>
<h2>Hello {{input.value}}</h2>
于 2017-07-26T19:03:02.717 回答