等待复选框更改以确认对话框

Posted 2021-04-09

如果我从对话框中单击“否”，我试图停止复选框的更改操作。对话框显示，但在关闭对话框后，我无法使复选框的（更改）发生

我曾尝试使用Promise或在对话框的afterClosed（）方法中执行所有操作，但没有任何方法可以在关闭对话框后使复选框（更改）发生。

export class GenericMessageConfirmDialogComponent {

  constructor(public dialogRef:             
MatDialogRef<GenericMessageConfirmDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) { }

  onNoClick(): void {
    this.dialogRef.close(false);
  }

  onYesClick(): void {
    this.dialogRef.close(true);
  }

// html

<input type="checkbox" [(ngModel)]="element.isActive" (change)="onTaskCheckBoxChange(element)" (click)="onTaskCheckBoxClick($event)">

onTaskCheckBoxChange(model: TaskTableEntryModel) {

    console.log("onTaskCheckBoxChange");
    //this always does not wait for the dialog to close
  }

onTaskCheckBoxClick(event: any) {

    let message = "asdhasdlfca asdcasd  asdd";

    var width = 200 + message.length;

    const dialogRef = this.dialog.open(GenericMessageConfirmDialogComponent, {
      width: width + 'px',
      data: { msg: message }
    });

    dialogRef.afterClosed().subscribe(result => {

      if (result == true) {
        console.log("yyyyy");
      } else {
        console.log("nnnn");
        event.preventDefault(); //this should stop the change of the checkbox
      }
    });
}

还尝试过：

let message = "asdhasdlfca asdcasd  asdd";

    var width = 200 + message.length;

    const dialogRef = this.dialog.open(GenericMessageConfirmDialogComponent, {
      width: width + 'px',
      data: { msg: message }
    });

    dialogRef.afterClosed().toPromise().then(data => {
      console.log("pppppppppppp");
      console.log(data);
    });

    console.log("after promise");

在这里，我仍然无法等待承诺完成。行console.log（“承诺后”）;将在对话框打开时发生。所以我只需要让它充当同步。

答案

    event.preventDefault(); //this should stop the change of the checkbox

这不起作用，因为您在此处创建的匿名函数是异步调用的，并且在事件完成之后才会调用。

为什么不将element.isActive的值设置为无单击时的先前值。假设element.isActive是一个布尔值。

 dialogRef.afterClosed().subscribe(result => {

      if (result == true) {
        console.log("yyyyy");
      } else {
        element.isActive = !element.isActive;
        console.log("nnnn");
      }
    });