Mat-checkbox проверял свойство, определенное модальным ответом

Question

У меня есть массив пользователей, и в HTML я использовал * ngFor , чтобы создать флажок для каждого элемента. У меня также есть @ Input assignAccountIds [] , который представляет выбранных по умолчанию пользователей.

Элемент флажка следующий:

<mat-checkbox
   color="primary"
   [disabled]="disableCurrentAccountCheckbox && account.id === currentAccountId"
   [checked]="isAccountSelected(account)"
   (change)="onSelectAccount($event, account)"
>

isAccountSelected метод проверки, существует ли пользователь в массиве выбранных элементов, чтобы узнать, нужно ли мне это проверять или нет, и вот реализация:

isAccountSelected(account: ClientAccount): boolean {
    return (this.assignedAccountIds || []).includes(account.id);
}

На выходе change ,Реализация метода следующая:

onSelectAccount(event: MatCheckboxChange, account: ClientAccount): void {
    if (
      !event.checked &&
      this.currentAccountId &&
      account.id === this.currentAccountId
    ) {
      const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
        data: {
          message: `You will not be able to see this inspection if you unassign yourself!`,
          buttonColor: 'primary',
          buttonLabel: 'Unassign',
        },
        position: {
          right: '10px',
          bottom: '10px',
        },
        maxWidth: '580px',
      });

      dialogRef
        .afterClosed()
        .pipe(untilDestroyed(this))
        .subscribe(result => console.log(result));
    } else {
      this.selectionChange.emit({ id: account.id, checked: event.checked });
    }
  }

Итак, что я на самом деле пытаюсь сделать, это отобразить модальное подтверждение, когда вы хотите отменить выбор из списка. И только после того, как вы выберете Да или Нет из модального режима, флажок останется отмеченным или будет снят.

Answer 1

MatCheckbox не предоставляет встроенного способа «перехватить» действие «проверить / снять». Вы можете прослушать событие изменения только после того, как оно произойдет. Однако вы можете использовать обычное событие щелчка для перехвата:

Флажок

<mat-checkbox #cb (click)="confirmAssign($event)">Assigned</mat-checkbox>

Действия диалога

<mat-dialog-actions>
  <button mat-button [mat-dialog-close]="false">Cancel</button>
  <button mat-button [mat-dialog-close]="true">Unassign</button>
</mat-dialog-actions>

TS

@ViewChild('cb', {static: true}) cb: MatCheckbox;

constructor(public dialog: MatDialog) {}

confirmAssign(event) {

  // only intercept if currently checked
  if (this.cb.checked) {

    // stop the click from unchecking the checkbox
    event.preventDefault();

    // ask for confirmation
    this.dialog.open(ConfirmationDialogComponent).afterClosed().subscribe(confirmed => {
      if (confirmed) {
        // uncheck the checkbox
        setTimeout(() => this.cb.checked = false);
      }
    });
  }
}