Angular中结合管道与CDK虚拟滚动高效选中所有筛选项

针对1000-2000条数据量的虚拟滚动列表全选问题，核心思路是避免重复筛选计算和减少不必要的对象状态修改，具体方案如下：

1. 缓存筛选结果，避免重复执行管道过滤 #

不要在模板中依赖filterPipe1、filterPipe2实时过滤，而是在组件内缓存筛选后的结果：

• 在组件中维护filteredItems变量，仅当筛选条件（比如搜索词、分类选项）变化时，手动调用管道的transform方法一次，将结果赋值给filteredItems。
• 模板中直接用*cdkVirtualFor="let item of filteredItems"渲染，避免每次变更检测都触发管道计算。

示例代码：

// 组件内
originalItems: YourItemType[]; // 原始全量数据
filterConditions: { keyword: string; category: string }; // 筛选条件
filteredItems: YourItemType[] = [];

constructor(private filterPipe1: FilterPipe1, private filterPipe2: FilterPipe2) {}

// 当筛选条件变化时调用
updateFilteredItems() {
  let temp = [...this.originalItems];
  temp = this.filterPipe1.transform(temp, this.filterConditions.keyword);
  temp = this.filterPipe2.transform(temp, this.filterConditions.category);
  this.filteredItems = temp;
}

2. 用ID集合+状态标记替代遍历修改条目选中状态 #

直接遍历修改2000条数据的checked属性会触发多次变更检测，改用选中ID集合+全选状态标记的方式：

• 维护selectedIds: Set<number | string>存储选中条目的唯一ID（Set的增删查操作都是O(1)，比数组高效）。
• 维护isAllSelected: boolean标记当前是否全选。

全选/取消全选逻辑 #

selectedIds = new Set<number>();
isAllSelected = false;

toggleAllSelect() {
  this.isAllSelected = !this.isAllSelected;
  if (this.isAllSelected) {
    // 批量添加筛选后所有条目的ID到集合
    this.filteredItems.forEach(item => this.selectedIds.add(item.id));
  } else {
    this.selectedIds.clear();
  }
}

单个条目选中/取消逻辑 #

toggleItemSelect(item: YourItemType, isChecked: boolean) {
  if (isChecked) {
    this.selectedIds.add(item.id);
    // 检查是否所有筛选条目都已选中，同步全选状态
    const allSelected = this.filteredItems.every(i => this.selectedIds.has(i.id));
    this.isAllSelected = allSelected;
  } else {
    this.selectedIds.delete(item.id);
    // 只要有一个取消，全选状态就设为false
    this.isAllSelected = false;
  }
}

模板中绑定选中状态 #

<!-- 表头全选复选框 -->
<input type="checkbox" [checked]="isAllSelected" (change)="toggleAllSelect()">

<!-- 列表条目复选框 -->
<cdk-virtual-scroll-viewport itemSize="50">
  <div *cdkVirtualFor="let item of filteredItems">
    <input 
      type="checkbox" 
      [checked]="isAllSelected || selectedIds.has(item.id)"
      (change)="toggleItemSelect(item, $event.checked)"
    >
    <!-- 其他条目内容 -->
  </div>
</cdk-virtual-scroll-viewport>

3. 额外性能优化 #

• 给组件设置ChangeDetectionStrategy.OnPush，减少不必要的变更检测：

  @Component({
    // ...其他配置
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  

• 如果filteredItems更新时需要触发变更检测，可调用this.changeDetectorRef.markForCheck()（需注入ChangeDetectorRef）。

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