Angular中使用分页时如何保持mat-card复选框状态？

云原生阿岚

2026-7-22

解决分页时复选框状态丢失的思路

问题核心是：分页切换时当前页组件会被销毁，复选框的选中状态仅存于DOM中未做持久化，返回原页面重新渲染的卡片无法恢复之前的选中状态。以下是具体解决步骤：

1. 独立存储选中状态
在组件类中定义一个Set（或数组）保存所有选中的卡片ID，这个集合不受组件渲染销毁影响：
```
selectedIds = new Set<number>(); // 若card.id为其他类型，按需调整
```

2. 绑定复选框的选中状态
修改模板中的复选框，添加[checked]绑定，从selectedIds中读取状态：

<input type="checkbox" name="{{card.name}}"
       [value]="card.id" 
       [checked]="selectedIds.has(card.id)"
       (change)="onCheck($event, card.id)"> {{card.displayName}}

3. 更新选中状态逻辑
修改onCheck方法，同步更新selectedIds集合：

onCheck(event: Event, id: number) {
  const checkbox = event.target as HTMLInputElement;
  if (checkbox.checked) {
    this.selectedIds.add(id);
  } else {
    this.selectedIds.delete(id);
  }
  // 若需同步表单数组，添加以下逻辑（根据你的表单结构调整）
  this.syncFormArray(id, checkbox.checked);
}

4. 同步表单数组（可选）
因为你使用了formArrayName="entities"，如果需要表单与选中状态保持一致，需确保表单数组控件状态和selectedIds同步：

syncFormArray(id: number, isChecked: boolean) {
  const controlIndex = this.entitiesFormArray.controls.findIndex(ctrl => 
    ctrl.value.id === id // 需匹配你表单控件中对应card.id的字段
  );
  if (controlIndex !== -1) {
    this.entitiesFormArray.at(controlIndex).patchValue({ checked: isChecked });
  }
}