ngFor 正在重新渲染 observables 变化的内容答案

【问题标题】：ngFor is re-rendering the content on the change of observablesngFor 正在重新渲染 observables 变化的内容
【发布时间】：2019-11-01 06:53:44
【问题描述】：

我无法找到为什么 ngFor 会重新渲染 Observable 数组的内容，每当任何可观察对象的值发生变化时。

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

每当第三个 observable 发出新值时，ngFor 会在整个数组上重新迭代。为了验证这种行为，我创建了一个函数来按递增顺序返回计数。每当从 ngFor 中的模板调用这个 'getCount' 方法时，它都会返回计数并将计数加一。

You can find the code here

我想知道 为什么 ngFor 重新渲染整个内容 关于一个可观察对象的变化以及 为什么 angular 会抛出错误 "ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: 47245'. Current value: 'null: 47248'."

【问题讨论】：

这是预期的行为。您可以使用trackby 来改进 *ngFor 迭代。 (more info)
这不是 ngFor 的问题。关于getCount()。尝试从 Html 文件中删除它

标签： javascript angular observable ngfor

【解决方案1】：

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

为避免重新渲染，您可以使用trackBy 函数。

Stackblitz

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

还有一个博客对此进行了清楚的解释。

trackby-with-ngfor-directives-in-angular

你也可以在 observables 中使用trackBy。我已经使用您的示例进行了一些修改，请专注于开发人员工具，您只能看到 observable 被渲染，它不会重新渲染 ngFor。

带有 trackby 的 Observable => https://stackblitz.com/edit/angular-bbhmps

【讨论】：

我们可以在 Observables 中使用 trackBy 吗？在我的示例中，我使用了可观察对象数组，但无法使用 trackBy 映射可观察对象。
@NPrafull 我已经更新了答案。让我知道这是否有帮助。
感谢您更新答案@ng-suhas。当我使用 getCount() 和 trackBy 时会发生什么。为什么使用 getCount() 更新所有 div？
@NPrafull 我们应该避免在 Angular 模板中进行函数调用。这是一个很好的博客，它解释了为什么我们不应该使用它medium.com/showpad-engineering/…。让我知道这是否有帮助