Angular 中实现分页表格的“全选”功能：正确绑定与状态管理

本文详解如何在 angular material 表格（含分页）中实现仅对当前页数据生效的“全选 / 取消全选”复选框，避免跨页误操作，并解决因共享布尔变量导致的状态同步错误。

在使用 mat-table + 分页（如 MatPaginator）的 Angular 应用中，“全选”功能若未正确处理分页上下文，极易出现 全量数据被勾选但仅部分提交 或 勾选状态与实际数据不一致 的问题。根本原因在于：你当前使用了单一布尔变量 imchecked 绑定所有行的 [checked] 状态，导致所有 共享同一状态——点击“全选”时，它们都显示为选中，但底层数据（c.IsSelected）并未按需批量更新；更严重的是，forEach 遍历的是完整 this.cards 数组（可能含上千条），而非当前分页的子集。

✅ 正确做法：状态隔离 + 分页感知

1. 状态管理：为每行独立维护选中状态

弃用全局 imchecked: boolean，改用数组存储每行独立状态（推荐使用 Map 或 boolean[]）。由于表格渲染依赖 dataSource，且分页后仅显示当前页数据，我们应 只管理当前页数据的状态映射：

// 在组件类中定义 currentCheckedMap = new Map(); // key: card.Id, value: 是否选中  // 获取当前页卡片列表（假设 dataSource 是 MatTableDataSource）get currentPageCards(): CardModule.Card[] {const startIndex = this.paginator?.pageIndex * this.paginator?.pageSize || 0;   const endIndex = startIndex + (this.paginator?.pageSize || 10);   return this.cards.slice(startIndex, endIndex); }

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

修改 mat-cell 中的复选框，通过 element.Id 查找对应状态：

3.“全选”逻辑：仅操作当前页数据

ToggleCheckAll() 应遍历 currentPageCards，并同步更新 currentCheckedMap 和 selectedCards：

toggleCheckAll() {   const currentPage = this.currentPageCards;   const shouldSelectAll = !currentPage.some(card => !this.currentCheckedMap.get(card.Id));    currentPage.forEach(card => {const isSelected = shouldSelectAll;     this.currentCheckedMap.set(card.Id, isSelected);      // 同步更新业务选中列表 selectedCards     if (isSelected && !this.selectedCards.includes(card.Id.toString())) {this.selectedCards.push(card.Id.toString());     } else if (!isSelected && this.selectedCards.includes(card.Id.toString())) {const index = this.selectedCards.indexOf(card.Id.toString());       this.selectedCards.splice(index, 1);     }   }); }

4. 单行切换逻辑精简优化

toggleRowSelection() 可大幅简化（无需手动查索引）：

toggleRowSelection(card: CardModule.Card) {const current = this.currentCheckedMap.get(card.Id) ?? false;   const newStatus = !current;    this.currentCheckedMap.set(card.Id, newStatus);    if (newStatus && !this.selectedCards.includes(card.Id.toString())) {this.selectedCards.push(card.Id.toString());   } else if (!newStatus) {const idx = this.selectedCards.indexOf(card.Id.toString());     if (idx> -1) this.selectedCards.splice(idx, 1);   } }

⚠️ 关键注意事项

• 勿复用 imchecked 全局变量：这是导致“视觉全选但逻辑未同步”的根源；每个复选框必须有独立状态源。
• 严格区分“UI 状态”与“业务数据”：currentCheckedMap 仅用于渲染控制；selectedCards 才是提交依据，二者需保持同步。
• 监听分页变化：当用户切换页码时，建议重置 currentCheckedMap（或保留跨页记忆，按需设计），并在 this.paginator.page 事件中处理：

  ngOnInit() {   this.paginator.page.subscribe(() => {this.currentCheckedMap.clear(); // 或保留历史选择   }); }

• 性能提示：对千级数据，Map 查找为 O(1)，远优于遍历数组查找。

通过以上改造，“全选”将精准作用于当前页，提交数据与界面状态完全一致，彻底解决分页场景下的状态错位问题。