Question

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

我尝试使用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（“ after promise”）;对话框打开时会发生。所以我只需要使其同步即可。

Answer 1

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

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

1 个答案: