Angular中使用返回数组的函数配合*ngFor循环是否可行？

可能出现的Bug #

• 性能损耗随数据量放大：当前数据量小的时候看不出问题，但如果items数组规模变大（比如几百上千条），每次组件触发变更检测（比如用户输入、页面滚动、父组件更新等场景），都会执行一次filter生成新数组，频繁的计算会占用大量CPU，导致页面卡顿。
• DOM无意义的销毁重建：因为每次函数返回的都是全新的数组对象，Angular的*ngFor会判定数据源引用发生变化，会把原有列表的DOM元素全部销毁，再重新创建新的DOM。哪怕数组内容完全没变，也会执行这个操作。如果列表项是复杂组件，还会触发组件的ngOnDestroy和ngOnInit生命周期，可能导致组件状态丢失（比如输入框内容、展开的面板状态），同时增加DOM操作开销。
• 潜在的变更检测循环：如果后续维护时不小心在getItemsByCategory函数里修改了组件的属性（比如误操作修改items数组或者其他触发变更检测的变量），会导致变更检测反复触发，形成无限循环，直接让页面卡死。

方案可行性 #

在**小数据量、组件几乎无交互（静态页面）**的场景下，这个写法暂时能正常运行，但绝对不推荐作为长期或可维护的方案——随着项目迭代，数据量和交互复杂度提升，上述问题会逐渐暴露，到时候再重构成本更高。

更优替代方案 #

1. 提前缓存过滤结果 #

在组件内定义一个专门存储过滤后数据的属性，只在items数组变化时重新计算过滤结果，模板直接绑定这个缓存属性：

// app.component.ts
items = [
 { category: 1, type: 'book', price: '100' },
 { category: 2, type: 'electronics', price: '1000' },
 { category: 1, type: 'book', price: '100' },
];
filteredItems: typeof this.items = [];

ngOnInit() {
  // 初始化时计算一次
  this.filteredItems = this.getItemsByCategory(1);
}

// 当items动态更新时，重新计算过滤结果
updateItems(newItems: typeof this.items) {
  this.items = newItems;
  this.filteredItems = this.getItemsByCategory(1);
}

getItemsByCategory(category: number) {
  return this.items.filter(item => item.category === category);
}

模板修改为：

<div *ngFor="let item of filteredItems">
  {{item.type}}
</div>

2. 使用纯管道（Pipe） #

创建一个纯管道，Angular会自动缓存管道的计算结果，只有当输入的items数组引用或category参数变化时，才会重新执行过滤逻辑：

// category-filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'categoryFilter'
})
export class CategoryFilterPipe implements PipeTransform {
  transform(items: any[], category: number): any[] {
    if (!items || category == null) return items;
    return items.filter(item => item.category === category);
  }
}

模板使用方式：

<div *ngFor="let item of items | categoryFilter:1">
  {{item.type}}
</div>

内容的提问来源于stack exchange，提问作者Noob