Angular中@ViewChildren获取复选框时出现undefined错误的求助

问题背景 #

我使用Angular的mat-table展示Groups实体，数据源包含50多行数据，但表格受高度限制采用虚拟滚动机制——仅渲染当前可见区域的行，初始加载仅显示前14行，用户向下滚动后才会加载更多行。表格每行配有自定义复选框组件，通过@ViewChildren获取复选框实例：

@ViewChildren('groupCheckboxes') viewGroupCheckboxes: QueryList<CheckboxComponent>;

需求是页面初始加载时，将预选中的分组（例如A、B、Y）对应的复选框设为选中状态，当前实现的方法如下：

setupGroupCheckboxes(): void {
  for (const refItem of this.preSelectedGroups){
    let matchingIndex = this.rowsGroups.findIndex(item => item.id === refItem.id);
    if (matchingIndex !== -1) {
      this.viewGroupCheckboxes.get(matchingIndex).checked = true;
      this.groupCheckboxArray[matchingIndex] = true;
      this.isGroupLoaded = true;
    } else {
      this.isGroupLoaded = false;
    }
  }
}

问题分析 #

由于mat-table的虚拟滚动特性，未进入视图区域的行（例如索引24的Y分组）对应的复选框组件并未被渲染，此时通过viewGroupCheckboxes.get(matchingIndex)获取到的是undefined，直接设置checked属性会触发报错：

ERROR TypeError: Cannot set properties of undefined (setting 'checked').

解决方案 #

方案1：数据绑定控制复选框状态（推荐） #

放弃直接操作DOM组件实例，通过数据绑定的方式控制复选框状态，从根源避免未渲染组件的访问问题。

1. 初始化时先同步预选中状态到状态数组：

initPreSelectedStates(): void {
  // 遍历数据源，生成对应选中状态数组
  this.groupCheckboxArray = this.rowsGroups.map(group => 
    this.preSelectedGroups.some(item => item.id === group.id)
  );
}

2. 在模板中将复选框的checked属性绑定到状态数组：

<mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="select">
    <mat-header-cell *matHeaderCellDef></mat-header-cell>
    <mat-cell *matCellDef="let row; let i = index">
      <app-checkbox #groupCheckboxes [checked]="groupCheckboxArray[i]"></app-checkbox>
    </mat-cell>
  </ng-container>
  <!-- 其他列定义 -->
</mat-table>

当行滚动进入视图时，复选框会自动根据绑定的状态数组显示选中状态，无需手动操作DOM。

方案2：监听渲染事件动态更新 #

若必须操作DOM组件实例，可通过监听组件渲染事件，仅对已渲染的复选框进行状态更新：

1. 订阅QueryList的变化事件，在新行渲染后更新状态：

ngAfterViewInit(): void {
  // 监听复选框组件列表的变化
  this.viewGroupCheckboxes.changes.subscribe(() => {
    this.updateRenderedCheckboxStates();
  });
  // 初始加载后执行一次
  this.updateRenderedCheckboxStates();
}

updateRenderedCheckboxStates(): void {
  // 仅遍历已渲染的复选框，更新对应状态
  this.viewGroupCheckboxes.forEach((checkbox, index) => {
    const currentGroup = this.rowsGroups[index];
    const isPreSelected = this.preSelectedGroups.some(item => item.id === currentGroup.id);
    if (isPreSelected) {
      checkbox.checked = true;
      this.groupCheckboxArray[index] = true;
    }
  });
}

2. 同时监听滚动事件，确保滚动加载新行后同步更新：

<mat-table [dataSource]="dataSource" (scrolledIndexChange)="updateRenderedCheckboxStates()">
  <!-- 表格内容 -->
</mat-table>

方案3：禁用虚拟滚动（临时方案） #

如果数据量不大（50多行完全满足），可直接禁用虚拟滚动，让所有行一次性渲染完成：

<!-- 移除虚拟滚动相关配置，如mat-virtual-scroll-container等属性 -->
<mat-table [dataSource]="dataSource">
  <!-- 表格内容 -->
</mat-table>

此方法会牺牲大数量场景下的性能，仅作为临时应急方案。

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