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

问题描述 投票:0回答:1

我无法找到为什么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'.

javascript angular observable ngfor
1个回答
0
投票

发生这种情况是因为默认情况下,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

© www.soinside.com 2019 - 2024. All rights reserved.