角度：关闭 MatDialog答案

【问题标题】：Angular: Close a MatDialog角度：关闭 MatDialog
【发布时间】：2019-10-04 18:40:26
【问题描述】：

当我发出 HTTP 请求时，我正在打开加载 MatDialog。但是，当我尝试在调用的订阅中关闭它时，它并没有关闭它。

我做错了什么？

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

  }

【问题讨论】：

您缺少括号。

标签： angular typescript

【解决方案1】：

close 是函数，所以你必须像这样称呼它

dialogRefLoading.close();

而不是

 dialogRefLoading.close;

【讨论】：

【解决方案2】：

您在 else 条件中定义了 dialogRefLoading 变量。它应该在全球范围内声明。而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")
        });
    }
  }

【讨论】：