Angular 复选框状态检查触发太频繁

Question

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

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

[checked]="getCheckedStatus()"

这个 stackblitz 中存在简化的问题 - https://stackblitz.com/edit/angular-o622bw?embed=1&file=src/app/app.component.html

问题 - console.log()（或者说 getCheckedStatus()）在点击 Update 按钮时经常被触发降低性能。

Answer 1

由于 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 // <--
})
// ...

Answer 2

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

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

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