MD Dialog Material Angular 2 ждать закрытия

У меня есть диалог с вариантами «да» и «нет» (окно подтверждения). Я хочу дождаться, пока пользователь не нажмет кнопку «да» или «нет» в диалоговом окне, но прямо сейчас при нажатии кнопки, даже до выбора параметров в диалоговом окне, журнал консоли печатает начальную/пустую строку.

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

angular angular-material mddialog
person Malik Shahzad    schedule 14.02.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это связано с тем, как вы написали код, и с тем фактом, что 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.
  });
 }
person Gilad S    schedule 14.02.2017