绑定mat-dialog-close为true后Mat Dialog仍无法关闭

问题原因 #

你当前的写法存在关键问题：点击「Continue」按钮时，mat-dialog-close会立即读取matchComplete的值（此时为false），所以对话框不会关闭。后续API请求完成后再把matchComplete设为true，也不会触发对话框重新关闭——因为mat-dialog-close的绑定只在按钮点击瞬间生效。

方案一：用MatDialogRef手动控制关闭（推荐） #

这是最直接可靠的方式，通过注入MatDialogRef，在API请求完成后手动调用关闭方法。

修改TypeScript代码

import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'match-dialog',
  templateUrl: 'match-dialog.html',
})
export class MatchDialog {
  constructor(
    @Inject(MAT_DIALOG_DATA) public data: {text: string, foo: object},
    private apiService: ApiService,
    private dialogRef: MatDialogRef<MatchDialog> // 注入对话框引用
  ) {}

  matchDialog() {
    this.apiService.add()
      .subscribe({
        complete: () => {
          this.dialogRef.close(true); // API完成后手动关闭，可传入返回值给调用方
        },
        error: (err) => {
          // 可选：处理错误，比如提示用户，不关闭对话框
          console.error('请求失败:', err);
        }
      });
  }                                             
}

修改HTML代码

去掉[mat-dialog-close]绑定，通过代码手动控制关闭：

<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>
  <button
    mat-raised-button
    cdkFocusInitial    
    (click)="matchDialog()"
    color="accent">Continue</button>
</mat-dialog-actions>

方案二：禁用按钮+变量控制关闭 #

如果想保留mat-dialog-close的绑定逻辑，可以在API请求过程中禁用按钮，避免用户重复点击，直到请求完成后允许关闭。

修改TypeScript代码

@Component({
  selector: 'match-dialog',
  templateUrl: 'match-dialog.html',
})
export class MatchDialog {
  isLoading = false;
  matchComplete = false;

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: {text: string, foo: object},
    private apiService: ApiService,
  ) {}

  matchDialog() {
    this.isLoading = true;
    this.apiService.add()
      .subscribe({
        complete: () => {
          this.matchComplete = true;
          this.isLoading = false;
        },
        error: (err) => {
          this.isLoading = false;
          console.error('请求失败:', err);
        }
      });
  }                                             
}

修改HTML代码

添加按钮禁用状态，确保只有请求完成后mat-dialog-close才会生效：

<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>
  <button
    mat-raised-button
    [mat-dialog-close]="matchComplete"
    [disabled]="isLoading"
    cdkFocusInitial    
    (click)="matchDialog()"
    color="accent">Continue</button>
</mat-dialog-actions>

方案对比 #

• 方案一更灵活，能精准控制对话框的关闭时机，还能在请求失败时不关闭对话框，适合大多数场景。
• 方案二更贴近你原本的写法，但需要额外处理按钮禁用状态，逻辑稍繁琐。

内容的提问来源于stack exchange，提问作者dman