angular - ngfor循环内的数据绑定时出现角度错误

Question

为什么每次我使用 ngFor 时，循环都会运行 4 次？以及如何阻止它？有人可以向我解释发生了什么吗？

这是一个小样本。

标签： angularfor-loopionic4

Answer 1

该iShouldrepeatOneTime方法被调用 4 次的原因是因为 Angular 的默认ChangeDetectionStrategy。默认情况下，每当你的组件发生变化时，在这种情况下，对于每个循环，Angular 都会检查你的整个组件是否有变化。Angular 知道 的返回值是否iShouldrepeatOneTime已更改的唯一方法是调用它。

那么你如何解决这个问题呢？有两种选择：

1. 使用OnPushChangeDetectionStrategy，或
2. 确保不要因为事件发射器以外的原因绑定到模板中的方法。而是绑定到属性。

我将扩展我的第二点。想象一下，您的组件中有一个属性someValue和一个方法calculateSomeValue()，如下所示：

someValue = 'foo';

calculateSomeValue(): string {
  return 'bar';
}

在您的模板中，拥有{{ someValue }}比在前一种方法中更有效，{{ calculateSomeValue() }}因为 Angular 已经知道属性的值是否已更改以及是否需要在视图中更新。在后一种方法中，Angular 需要先调用该方法，然后才能知道是否需要更新视图中的值。