Angular 2 - ExpressionChangedAfterItHasBeenCheckedError答案

【问题标题】：Angular 2 - ExpressionChangedAfterItHasBeenCheckedErrorAngular 2 - ExpressionChangedAfterItHasBeenCheckedError
【发布时间】：2018-01-20 11:24:16
【问题描述】：

我正在尝试在我创建的表中填充几行。该表已成功填充，但我收到错误：

“ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。以前的值：'1'。当前值：'ah'。”

这并不是真正的问题，因为该错误不会使我的程序或任何东西崩溃，但是每当我更改表中的任何单位时，它都会将所有单位的值更改为“当前值”在上面的错误中。（在这种情况下，我将其设为“啊”，请参见下面的代码）

这就是我填充表格的方式：

<div class="row-container">
  <div *ngFor="let week of getWeeks()" class="row">
    <input class="week" maxlength="2" (input)="type($event.target.value, week)" value="{{getCapacity(week)}}">
  </div>
</div>

这就是我更新值的方式：

getCapacity(week: Date): string {
    if (<conditions are met>) { 
        const capacity = EntryComponent.capacity[EntryComponent.index];
        EntryComponent.index++;
        return capacity.value;
    }
    return 'ah';
}

我没有使用动态组件作为标签，而是动态更改输入标签的值。

【问题讨论】：

我想你可以猜到：你应该在 value 中放置一个绑定并更改它。
Angular dynamic component loading - ExpressionChangedAfterItHasBeenCheckedError的可能重复
在开发模式下，Angular 运行每个更改循环两次，并且发生错误是因为它们之间发生了更改（它不应该）。这可能是因为您的第一个更改循环正在更改您的“”条件是什么。
@LarsMonty 谢谢！将此作为答案，我将其标记为正确。我所要做的就是在循环结束时将我的索引重置为 0，以便再次满足条件。

标签： javascript angular typescript

【解决方案1】：

在开发模式下，Angular 会运行每个更改检测循环两次 - 一次正常运行，第二次以确保在初始循环期间没有任何更改。如果发生了变化，ExpressionChangedAfterItHasBeenCheckedError 将被抛出。这并不意味着您的应用程序将无法运行，但更多的是 Angular 警告您这种行为。

在您的情况下，错误在此代码中：

if (<conditions are met>) {  <--- Creating behavior that causes error
    const capacity = EntryComponent.capacity[EntryComponent.index];
    EntryComponent.index++;
    return capacity.value;
}
return 'ah';

如果更改循环内部发生的事情改变了该条件，则第一个循环返回capacity.value，条件将改变，第二个循环将不满足条件，并返回ah。这导致了错误，这是一个正确的警告：我不建议绑定的目标依赖于在更改循环期间更改的条件。我建议将此条件重新配置为取决于组件的某些属性。

【讨论】：