Question

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

我通过调用以下函数来更新检查状态。

[checked]="getCheckedStatus()"

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

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

Answer 1

由于getCheckedStatus是从模板中调用的，因此每次执行角度更改检测时都会调用它。

如果您想自己处理更改检测，可以将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

角度复选框状态检查经常触发

2 个答案: