当前位置：首页 > 文章列表 > 文章 > 前端 > Angular实现表格全选功能详解

Angular实现表格全选功能详解

2026-01-24 09:27:40 0浏览收藏

本篇文章向大家介绍《Angular 实现当前页全选表格功能》，主要包括，具有一定的参考价值，需要的朋友可以参考一下。

Angular 中实现分页表格的“全选”功能（仅当前页生效）

在 Angular Material 表格中，使用单一布尔变量控制所有复选框会导致状态混乱；正确做法是为每行维护独立的选中状态，并结合分页数据源，确保“全选”仅作用于当前页可见行。

要实现在分页表格中点击表头“全选”复选框时，仅选中当前页显示的行（而非全部 1000 条数据），关键在于：避免共享 checked 状态变量，并动态获取当前页的数据子集。

❌ 原问题根源分析

imchecked 是一个全局布尔变量（public imchecked = false;），被所有共享绑定，导致视觉上“全勾选”，但逻辑上无法区分哪一行真正被选中；
ToggleCheckAll() 遍历了整个 this.cards 数组（可能含全部 1000 条），而未过滤出当前页数据；
this.selectedCards 的更新逻辑依赖 c.IsSelected，但 imchecked 并未与 c.IsSelected 同步，造成 UI 与数据不一致（如勾选了 1000 行，却只提交前 10 条 ID）。

✅ 正确实现方案

1. 为每行维护独立选中状态（推荐：使用 Map 或数组）

建议使用 Map（以 card.Id 为 key）或 boolean[]（以索引为 key）。这里以 Map 方式为例，更健壮且不受排序/分页影响：

// 在组件类中定义
selectedState = new Map<number, boolean>(); // card.Id → 是否选中

// 初始化：首次加载时可设默认为 false（可选）
ngOnInit() {
  this.dataSource.paginator = this.paginator;
  this.cards.forEach(card => this.selectedState.set(card.Id, false));
}

2. 更新模板：绑定行级状态，而非全局变量

<ng-container matColumnDef="IsSelected">
  <th mat-header-cell *matHeaderCellDef>
    <mat-checkbox
      [checked]="isAllCurrentPageSelected()"
      [indeterminate]="isSomeCurrentPageSelected() && !isAllCurrentPageSelected()"
      (change)="toggleSelectAllCurrentPage($event.checked)"
    >
    </mat-checkbox>
    Επιλογή Κάρτας
  </th>
  <td mat-cell *matCellDef="let element">
    <mat-checkbox
      [checked]="selectedState.get(element.Id) || false"
      (change)="toggleRowSelection(element)"
    >
    </mat-checkbox>
  </td>
</ng-container>

3. 实现核心逻辑方法（支持分页感知）

// 获取当前页显示的卡片（需配合 MatPaginator）
getCurrentPageData(): CardModule.Card[] {
  const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
  return this.cards.slice(startIndex, startIndex + this.paginator.pageSize);
}

// 判断当前页是否全选
isAllCurrentPageSelected(): boolean {
  const currentPage = this.getCurrentPageData();
  return currentPage.length > 0 &&
         currentPage.every(card => this.selectedState.get(card.Id) === true);
}

// 判断当前页是否部分选中（用于 indeterminate 状态）
isSomeCurrentPageSelected(): boolean {
  const currentPage = this.getCurrentPageData();
  return currentPage.some(card => this.selectedState.get(card.Id) === true);
}

// 全选/取消全选当前页
toggleSelectAllCurrentPage(checked: boolean): void {
  const currentPage = this.getCurrentPageData();
  currentPage.forEach(card => this.selectedState.set(card.Id, checked));
  this.updateSelectedCardsList();
}

// 单行切换
toggleRowSelection(card: CardModule.Card): void {
  const currentState = this.selectedState.get(card.Id) ?? false;
  this.selectedState.set(card.Id, !currentState);
  this.updateSelectedCardsList();
}

// 同步更新 selectedCards（提交用）
private updateSelectedCardsList(): void {
  this.selectedCards = Array.from(this.selectedState.entries())
    .filter(([_, isSelected]) => isSelected)
    .map(([id, _]) => id.toString());
}

4. ⚠️ 注意事项

务必初始化 MatPaginator：在 ngAfterViewInit 中设置 this.dataSource.paginator = this.paginator;，否则 paginator 属性为空；
*不要依赖 `matCellDef="let element; let i = index"的i作为数据索引**：因为虚拟滚动或分页后，index` 不等于原始数组下标；
避免在模板中直接调用耗性能的方法（如 getCurrentPageData()），已封装为纯函数且无副作用，可安全使用；
若需服务端分页（即 dataSource 为 MatTableDataSource 且数据按页拉取），请改用 this.dataSource.filteredData 或 this.dataSource.data 作为数据源基础。