Angular表格全选复选框异常：需选当前页却全选所有行

问题根源分析 #

1. UI与数据状态脱节：所有行的复选框绑定了全局变量imchecked，导致只要该变量切换，所有复选框都会同步显示勾选/取消，完全忽略每行实际的IsSelected数据状态。
2. 全选逻辑范围错误：ToggleCheckAll遍历的是完整的cards数组，而非当前分页的数据源，导致操作了所有分页的数据，不符合「仅选中当前分页行」的需求。
3. 硬编码限制逻辑混乱：用i<9强行限制仅处理前10条，既不具备扩展性，还造成UI显示与实际提交数据不一致的问题。

修复代码实现 #

1. HTML模板修改 #

去掉全局变量绑定，改为绑定每行数据的IsSelected属性，确保UI状态与数据状态完全一致：

<div class="table-responsive">
    <table mat-table [dataSource]="dataSource">  

        <ng-container matColumnDef="IsSelected">
            <th mat-header-cell *matHeaderCellDef mat-sort-header class="nowrap">
                <mat-checkbox style="left:-16px;" (change)="ToggleCheckAll($event)"></mat-checkbox>
                Επιλογή Κάρτας 
            </th>
            <td mat-cell *matCellDef="let element; let i = index;">
                <mat-checkbox [checked]="element.IsSelected" class="example-margin" (change)="ToggleChecked(element)">
                </mat-checkbox>
            </td>
        </ng-container>
        <!-- 其他列定义保持不变 -->
    </table>
</div>

2. TypeScript逻辑修改 #

核心逻辑重构

改为操作当前分页的数据源，封装重复的选中状态更新逻辑，避免冗余代码：

import { MatTableDataSource } from '@angular/material/table';
// 确保dataSource类型为MatTableDataSource<CardModule.Card>

// 全选/取消全选当前分页数据
public ToggleCheckAll(event: any) {
    const isChecked = event.checked;
    // 获取当前分页显示的数据集
    const currentPageData = this.dataSource.filteredData;
    
    currentPageData.forEach(card => {
        card.IsSelected = isChecked;
        this.updateSelectedCards(card, isChecked);
    });
}

// 单行选中/取消逻辑
public ToggleChecked(card: CardModule.Card) {
    card.IsSelected = !card.IsSelected;
    this.updateSelectedCards(card, card.IsSelected);
}

// 封装选中项数组更新逻辑，避免重复代码
private updateSelectedCards(card: CardModule.Card, isSelected: boolean) {
    const cardIdStr = card.Id.toString();
    if (isSelected) {
        // 避免重复添加已选中项
        if (!this.selectedCards.includes(cardIdStr)) {
            this.selectedCards = [...this.selectedCards, cardIdStr];
        }
    } else {
        // 移除取消选中的项
        const index = this.selectedCards.indexOf(cardIdStr);
        if (index > -1) {
            this.selectedCards.splice(index, 1);
        }
    }
}

3. 可选优化：表头复选框状态同步 #

如果需要表头复选框自动同步当前分页的选中情况（部分选中时显示半选状态），添加以下计算属性：

// 表头复选框是否显示半选状态
get isHeaderCheckboxIndeterminate(): boolean {
    const currentPageData = this.dataSource.filteredData;
    const selectedCount = currentPageData.filter(c => c.IsSelected).length;
    return selectedCount > 0 && selectedCount < currentPageData.length;
}

// 表头复选框是否全选
get isHeaderCheckboxChecked(): boolean {
    const currentPageData = this.dataSource.filteredData;
    return currentPageData.every(c => c.IsSelected);
}

然后修改表头复选框的绑定：

<mat-checkbox 
    style="left:-16px;" 
    [checked]="isHeaderCheckboxChecked"
    [indeterminate]="isHeaderCheckboxIndeterminate"
    (change)="ToggleCheckAll($event)">
</mat-checkbox>

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