角材料对话框 dialogref.close() 不工作答案

【问题标题】：Angular Material Dialog dialogref.close() not working角材料对话框 dialogref.close() 不工作
【发布时间】：2022-11-17 17:34:15
【问题描述】：

关闭不起作用，dialogRef.close() 未定义？

这是代码模板

   <button  mat-raised-button (click)="openModal()">Open Project Specifics</button>

  openModal(){
   let dialogRef = this.dialog.open(ProjectSpecificContentComponent, {
   data:{projectsSpecifics: this.projectSpecific},
      panelClass: 'project-content-dialog'
 })
     dialogRef.afterClosed().subscribe(result => console.log(result))
  }

这是被调用的组件

    <button mat-dialog-close>X</button>

              <div class="container">
                <div class="project-specific" *ngFor="let projectS of projectSpecificList">
               <h5>{{projectS.name}}</h5>
                <mat-form-field appearance="fill" class="mat-group">
                 <mat-label>Add project specific</mat-label>
          <mat-select multiple>
            <mat-option *ngFor="let item of getContent(projectS)">{{item.content}}</mat- 
            option>
          </mat-select>
        </mat-form-field>
         </div>

       </div>
       <div mat-dialog-actions>
         <button (click)="onClose()" mat-raised-button>Done!</button>
       </div>

和TS

           constructor(@Inject(MAT_DIALOG_DATA) public data: any,
             public dialogRef: MatDialogRef<ProjectSpecificContentComponent>,
                 ) { }



                      onClose(){
                        this.dialogRef.close();
                        }

同样在这里你可以看到我导入组件的模块

   imports[MatDialogModule]
   entryComponents: [ProjectSpecificContentComponent]

【问题讨论】：

请与问题分享 stackblitz

标签： angular typescript

【解决方案1】：

如果要获取'mat-select'的值，则必须设置'mat-select'的值，例如：

<mat-form-field appearance="fill" class="mat-group">
 <mat-label>Add project specific</mat-label>
  <mat-select multiple [(ngmodel)]="mySelect">
   <mat-option *ngFor="let item of getContent(projectS)">{{item.content}}</mat-option>
  </mat-select>
</mat-form-field>

下一步：获取对话框关闭后的值

mySelect:number;

onClose(){
this.dialogRef.close({ this.mySelect });
}

然后你可以看到 'mySelect' 出现在 'result'

希望对你有帮助！

【讨论】：

问题是关闭方法，我无法关闭对话框