Angular全选Checkbox功能失效问题排查求助

问题核心 #

手动选择行复选框功能正常，但点击表头全选按钮时，表格内的行复选框无法同步勾选/取消勾选——仅bulkActionArr和selection数据层面更新，UI无响应。

问题根源 #

行复选框未绑定选中状态，仅通过(change)事件触发手动选择逻辑，全选操作时没有触发UI更新的绑定机制，导致UI无法感知数据变化。

修正后的代码 #

TypeScript 部分

selection = new SelectionModel(true, []);
bulkActionArr: number[] = [];
checkAll: FormControl = new FormControl(false);

selectAll(event: any, datasource: any[]) {
    this.checkAll.setValue(event.checked);
    this.bulkActionArr = [];
    
    if (event.checked) {
        datasource.forEach(element => {
            this.selection.select(element.id);
            this.bulkActionArr.push(element.id);
        });
    } else {
        this.selection.clear();
        this.bulkActionArr = [];
    }
}

manualSelect(id: number, status: boolean, datasource: any[]) {
    if (status) {
        if (!this.bulkActionArr.includes(id)) {
            this.bulkActionArr.push(id);
            this.selection.select(id);
        }
    } else {
        const indexOfId = this.bulkActionArr.indexOf(id);
        if (indexOfId !== -1) {
            this.bulkActionArr.splice(indexOfId, 1);
            this.selection.deselect(id);
        }
    }
    
    // 同步全选框状态
    this.checkAll.setValue(this.bulkActionArr.length === datasource.length);
}

HTML 部分

<table mat-table [dataSource]="dataSource" matSort matSortActive="id" matSortDisableClear matSortDirection="desc">
    <ng-container matColumnDef="isChecked">
        <th class="isChecked" mat-header-cell *matHeaderCellDef>
            <!-- 传入dataSource.data而非dataSource本身，因为dataSource是数据源对象 -->
            <mat-checkbox [formControl]="checkAll" (change)="selectAll($event, dataSource.data)"></mat-checkbox>
        </th>
        <td class="px-3 text-start" mat-cell *matCellDef="let row; let i = index;">
            <!-- 绑定选中状态到bulkActionArr，让UI自动同步 -->
            <mat-checkbox 
                [checked]="bulkActionArr.includes(row.id)"
                (change)="manualSelect(row.id, $event.checked, dataSource.data)"
            ></mat-checkbox>
        </td>
    </ng-container>
</table>

关键修改点 #

1. 行复选框绑定选中状态：添加[checked]="bulkActionArr.includes(row.id)"，让UI根据bulkActionArr的内容自动更新选中状态；也可替换为[checked]="selection.isSelected(row.id)"，利用SelectionModel的内置方法判断。
2. 修正数据源传入：如果使用MatTableDataSource，需传入dataSource.data而非dataSource对象本身，确保遍历的是实际数据数组。
3. 同步SelectionModel状态：在manualSelect中补充selection.select/deselect逻辑，保持bulkActionArr和selection两个数据集合的一致性。

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