Question

我有一个用户数组，在HTML中，我使用了 * ngFor 为每个元素生成一个复选框。我也有一个 @InputsignedAccountIds [] ，它代表默认的选定用户。

复选框元素如下：

<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没有提供一种内置方式来“拦截”检查/取消检查动作。您只能在更改事件发生后收听。但是，您可以使用普通的click事件进行拦截：

复选框

<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);
      }
    });
  }
}

Mat-checkbox选中的属性由模态响应确定

1 个答案: