Сохранение значений флажков в Angular 8 при изменении страницы таблицы

Question

Я использую листовой лист. В каждой строке таблицы есть флажок, и когда флажок установлен, значение id этой строки добавляется в FormArray, при его удалении значение 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>

Answer 1

Самый простой способ сделать это - написать функцию, которая проверяет, есть ли заданный идентификатор (строка) в FormArray, и использовать эту функцию для привязки ввода [check] флажка.

Работа со стеком упрощенное решение: https://stackblitz.com/edit/angular-yydxh8

Хотя, так как вы уже используете материал, вы можете рассмотреть возможность использования SelectionModel, предоставляемого @ angular / cdk / collection. См .: https://material.angular.io/components/table/overview#selection