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 作为数据源基础。

✅ 最终效果

• 点击表头复选框 → 仅当前页行被选中/取消；
• 支持 indeterminate 状态（部分选中时显示短横线）；
• selectedCards 始终准确反映用户真实选择，邮件发送逻辑无需修改；
• 扩展性强：切换页面后，新页自动重置选中状态（或按需保留）。

通过解耦 UI 状态与业务数据、显式管理分页上下文，即可稳健实现符合用户体验与工程规范的“当前页全选”功能。

理论要掌握，实操不能落！以上关于《Angular实现表格全选功能详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！