angular - MD Dialog Material Angular 2 等待关闭

Question

我有一个包含是和否选项的对话框（确认框）。我想等到用户从对话框中按下是或否按钮，但现在单击按钮，即使在单击对话框中的选项之前，控制台日志也会打印初始/空字符串。

HTML：

<button (click)="foo()"></button>

零件：

selectedOption = '';

foo() {
  this.openDialog();
  console.log('selectedOption: ' + this.selectedOption); // Prints initial Value
  // hit the API if selectedOption is yes.
}

openDialog() {
  dialogRef.afterClosed().subscribe(result => {
    this.selectedOption = result;
  });
}

Answer 1

它与您编写代码的方式以及afterClosed异步返回 Observable 的事实有关。在调用 this.openDialog(); 你之后调用 console.log(....); 此时selectedOption仍然是空的，因为你在顶部将它初始化为一个空字符串。

只需将 console.log 和 api 逻辑移动到 subscribe 块：

selectedOption = '';

foo() {
  this.openDialog();
}

openDialog() {
  dialogRef.afterClosed().subscribe(result => {
    this.selectedOption = result;
    console.log('selectedOption: ' + this.selectedOption); // Prints 
    // hit the API if selectedOption is yes.
  });
 }