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逻辑移动到订阅块：

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

MD Dialog Material Angular 2等待关闭

1 个答案: