Angular - 不纯的管道 vs 功能

Question

我正在 Angular2 中的数组上实现过滤操作。当数组中的元素发生变化时，不会触发纯管道。因此，我必须使用不纯的管道或使用组件内部的函数进行过滤，如下所示。

*ngFor="let item of items | impureFilterPipe"

或者，

<!-- component.html -->
*ngFor="let item of filterFunction(items)"

// component.ts
sortFunction(items) { return items.sort(); }

据我所知，在模板中绑定函数在性能方面是不好的。但是，我看不出使用不纯管道而不是函数有什么区别。我想知道的是，上述两种方法之间的性能有什么不同吗？

Answer 1

正如评论中指出的，Angular 团队本身建议不要使用管道来过滤或排序集合。解释是，这些管道基本上会在每个更改检测周期运行，这使得它们即使对于小型集合也相当昂贵。

标准解决方案是控制何时进行排序操作，例如：

*ngFor="let item of filteredItems"

ngOnInit() {
  this.filteredItems = this.items.filter(/***/);
  ...
}

如果您想按需运行它，您也可以将该逻辑包装在其自己的函数中。