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 逻辑移动到订阅 block :

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