角度复选框状态检查经常触发[重复]答案

【问题标题】：Angular checkbox state check fires too often [duplicate]角度复选框状态检查经常触发[重复]
【发布时间】：2020-01-03 17:22:24
【问题描述】：

在我的 UI 中，我有太多以网格形式排列的复选框。它们的检查状态应由组件中存在的一次性逻辑确定。一旦更新，他们的状态就永远不会改变。

我已经通过调用如下函数更新了检查状态。

[checked]="getCheckedStatus()"

此堆栈闪电战中存在简化问题 - https://stackblitz.com/edit/angular-o622bw?embed=1&file=src/app/app.component.html

问题 - 每当点击 Update 按钮时，console.log()（或者说 getCheckedStatus()）被频繁触发，这会降低性能。

【问题讨论】：

标签： angular checkbox angular2-changedetection angular-changedetection

【解决方案1】：

我认为你的问题是从视图中调用一个函数。这使得 Angular 在它检查视图的每个类型中都调用该函数。所以从视图调用函数可能是一个性能问题。如果您需要根据视图中的事物转换事物，您可以使用管道。现在它不会每次都被调用，而是由 Angular 处理。

我希望没问题，但我复制了你的 stackbliz，并使用名为 selectStatus 的管道制作了一个版本。 [checked]="{accnt:accnt, itm:itm} | selectStatus"

https://stackblitz.com/edit/angular-hzdt4n

【讨论】：

【解决方案2】：

由于getCheckedStatus是从模板中调用的，所以每次进行Angular变化检测时都会调用它。

如果您想自己处理更改检测，可以将 changeDetectionStrategy 更改为“onPush”。

在此处了解更多信息：https://angular.io/api/core/ChangeDetectionStrategy

下面的例子解决了这个问题：

// ...
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection:  ChangeDetectionStrategy.OnPush // <--
})
// ...

【讨论】：

stackblitz.com/edit/angular-o622bw?embed=1&file=src/app/… 在这里我应用了 onPush 策略，但它仍然被调用了很多次。知道为什么吗？
它被调用了8次，因为你有8个复选框，每个复选框调用一次。
知道如何避免安慰 1000 次吗？
1000？我在多个浏览器上试过，只有 8 个（0 到 7）。
我的原始应用程序有很多复选框。这个 SB 是缩小版。