Angular CDK虚拟滚动MatSelect大数据集全选性能优化问题

这个问题的核心在于CDK虚拟滚动的特性：它只会渲染当前视口范围内的MatOption组件，你之前的全选逻辑是手动遍历已渲染的选项来同步选中状态，那些不在视口内的未渲染选项，只有当滚动到它们进入视口时才会被options.changes订阅触发更新，这就导致了明显的延迟。

下面是几个针对性的优化方案，能彻底解决这个问题：

1. 直接操作FormControl而非手动修改MatOption #

虚拟滚动场景下，不要直接操作DOM元素（MatOption），而是利用Angular表单的绑定特性，让MatOption自动同步FormControl的状态。这样不管选项是否被渲染，当它们进入视口时都会自动根据FormControl的值设置选中状态。

修改后的HTML代码 #

<mat-select [formControl]="multiSelectControl" multiple>
  <cdk-virtual-scroll-viewport itemSize="48" minBufferPx="200" maxBufferPx="400" [style.height.px]="5*48">
    <button (click)="selectAll()">Select All</button>
    <button (click)="clear()">Clear</button>
    <!-- 移除onSelectionChange，让FormControl自动同步 -->
    <mat-option *cdkVirtualFor="let topping of toppingList" [value]="topping">
      {{topping}}
    </mat-option>
  </cdk-virtual-scroll-viewport>
</mat-select>

注意：itemSize要设置为MatOption的实际高度（默认是48px），之前的5是错误的，这会导致虚拟滚动的计算不准确，也是潜在的性能问题点。

修改后的TS代码 #

import { FormControl } from '@angular/forms';
import { Component, OnInit } from '@angular/core';

@Component({
  // 组件元数据省略
})
export class YourComponent implements OnInit {
  multiSelectControl = new FormControl([]);
  selected: string[] = [];
  toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato']; // 示例数据源

  ngOnInit(): void {
    // 同步selected数组和FormControl的值，如果你需要保留selected变量的话
    this.multiSelectControl.valueChanges.subscribe(selectedValues => {
      this.selected = [...selectedValues];
    });
  }

  selectAll(): void {
    // 直接设置FormControl的值为所有选项
    this.multiSelectControl.setValue([...this.toppingList]);
  }

  clear(): void {
    // 清空FormControl的值
    this.multiSelectControl.setValue([]);
  }
}

2. 移除不必要的手动同步逻辑 #

之前在ngAfterViewInit里订阅options.changes手动同步选中状态的代码完全可以删掉——FormControl和MatOption的[value]绑定会自动完成状态同步，不需要额外的DOM操作和变更检测，这能大幅减少性能开销。

3. 优化选择变更逻辑（如果需要保留自定义处理） #

如果你确实需要在选项选择时做额外处理，也不要手动操作selected数组，而是直接基于FormControl的值来处理：

// 比如保留onSelectionChange的话，修改为：
onSelectionChange(change): void {
  if (!change.isUserInput) return;
  // 直接从FormControl获取最新选中值，不需要手动操作数组
  this.selected = [...this.multiSelectControl.value];
  // 这里可以加你的额外处理逻辑
}

为什么这些优化有效？ #

• 避免了手动遍历DOM元素的开销，利用Angular的表单绑定机制让组件自动同步状态，符合Angular的响应式设计理念。
• 虚拟滚动渲染新选项时，会直接读取FormControl的当前值来设置选中状态，不需要等待options.changes触发，彻底解决了滚动延迟的问题。
• 修正了itemSize的错误设置，让虚拟滚动的渲染计算更准确，减少不必要的组件销毁和重建。

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