Question

我正在使用床单。在表的每一行中都有一个复选框，选中该复选框后，该行的id值将添加到FormArray中，将其删除后，该ID值将从数组中删除。由于我的表中有页面，因此在做出选择之后，当我在下一页进行选择并返回到第一页时，即使我的行ID值位于FormArray中，我的复选框值也为false。如何确保选择的内容为true（如果为true）和false（如果为false）而不受页面更改的影响

.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>

Answer 1

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

使用简化的解决方案进行堆叠闪电战： https://stackblitz.com/edit/angular-yydxh8

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

在表格页面的Angular 8中保留复选框值

1 个答案: