在表格页面更改中保持 Angular 8 中的复选框值答案

【问题标题】：Keeping checkbox values in Angular 8 in table page change在表格页面更改中保持 Angular 8 中的复选框值
【发布时间】：2020-06-22 10:03:31
【问题描述】：

我使用的是单张纸。表格的每一行都有一个复选框，当复选框被选中时，该行的 id 值被添加到 FormArray，当它被移除时，id 值从数组中删除。因为我的页面在表格中，所以在我做出选择之后，当我在下一页做出选择并返回第一页时，即使我的行 ID 值在 FormArray 中，我的复选框值也是错误的。如何确保我的选择在真假时保持真假，而不受页面更改的影响

.ts 文件

  selectedAppeals: FormArray = new FormArray([]);
...
updateApeealChecked(event, id: string) {
    if (event.target.checked) {
      this.selectedAppeals.push(new FormControl(id));
    }
    else {
      let i: number = 0;
      this.selectedAppeals.controls.forEach((item: FormControl) => {
      if (item.value == id) {
         this.selectedAppeals.removeAt(i);
         return;
      }
      i++;
   });
 }
}

.html 文件

<mat-checkbox *ngIf="(row.status === appealStatus.Waiting || row.status === appealStatus.Redirected 
         || row.status === appealStatus.AwaitingApproval)"
         (change)="updateApeealChecked($event, row.id)">
</mat-checkbox>

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

最简单的方法是编写一个函数来检查给定的 id（行）是否已经在 FormArray 中，并将该函数用于复选框的 [checked] 的输入绑定。

使用简化的解决方案使用 stackblitz： https://stackblitz.com/edit/angular-yydxh8

不过，由于您已经在使用材质，您可能需要考虑使用 @angular/cdk/collections 提供的 SelectionModel。看： https://material.angular.io/components/table/overview#selection

【讨论】：