Angular: закрыть MatDialog

Question

Я открываю загрузочный MatDialog, когда делаю HTTP-запрос. Однако, когда я пытаюсь закрыть его в подписке на вызов, он не закрывается.

Что я делаю не так?

      saveListOfSteps(isFormValid: boolean): void{

    if(isFormValid== false){
      alert("You have not filled out all fields in the form! Fix that first");
    }else{
      // show a loading dialog
      let dialogRefLoading = this.dialog.open(PopupComponent, {
        width: '250px',
        data: {
          data: ["Loading..."],
          showCloseButton: false},
      },    
      );
     dialogRefLoading.close;
     this.SelfServiceDetailsService.saveListOfSteps(this.validationSteps)
     .subscribe(response=>{
      dialogRefLoading.close;
       this.showSaveResultsDialog(response.body),
     error => alert("An error occured")});
    }

  }

Answer 1

close является функцией, поэтому вы должны вызывать ее как

dialogRefLoading.close();

вместо

 dialogRefLoading.close;

Answer 2

Вы определены dialogRefLoading переменная внутри условия else. Это должно быть объявлено глобально. И close() является функцией, а не свойством в Dialog классе. Таким образом, вы должны использовать dialogRefLoading.close() вместо dialogRefLoading.close

---

Попробуйте этот код ниже вместо вашего кода

saveListOfSteps(isFormValid: boolean): void {
    let dialogRefLoading = null;
    if (isFormValid == false) {
      alert("You have not filled out all fields in the form! Fix that first");
    } else {
      // show a loading dialog
      dialogRefLoading = this.dialog.open(PopupComponent, {
        width: '250px',
        data: {
          data: ["Loading..."],
          showCloseButton: false
        },
      },
      );          
      this.SelfServiceDetailsService.saveListOfSteps(this.validationSteps)
        .subscribe(response => {
          dialogRefLoading.close();
          this.showSaveResultsDialog(response.body),
            error => alert("An error occured")
        });
    }
  }