ngFor正在根据可观察变量的变化重新渲染内容

Posted 2023-01-09

我无法找到为什么ngFor重新呈现可观察数组的内容，任何可观察变化的值。

我试图创建一个可观察的数组。数组中有3个可观察的。与其他两个可观察对象不同，第三个可观察对象以1秒的间隔发射值。

每当第三个可观察到的新值发出时，ngFor在整个数组上重新迭代。为了验证此行为，我创建了一个函数以递增顺序返回计数。每当从ngFor内部的模板中调用此“ getCount”方法时，它都会返回计数并将计数增加一个。

You can find the code here

我想知道为什么ngFor重新渲染整个内容在一个可观察到的变化和为什么角度会引发错误“ ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: 47245'. Current value: 'null: 47248'.”

答案

发生这种情况是因为默认情况下，angular使用它们的对象引用来跟踪这些对象，并且当我们对数组进行一些更改时，我们将返回新的对象引用。因此，angular不知道它是否是旧对象集合，这就是为什么它会破坏旧列表然后重新创建它们的原因。

为了避免重新渲染，可以使用trackBy功能。

Stackblitz => https://stackblitz.com/edit/angular-wts2we

单击Refresh Employees按钮时检查DOM元素。

这也是一个博客，清楚地对此进行了解释。

https://medium.com/@jinalshah999/trackby-with-ngfor-directives-in-angular-application-bd4d0db288eb