Angular 等待对话框未显示

在加载页面数据时，我实现了一个带有垫子旋转器的对话框.我使用的是ANGLE V14.我使用的是对话框，而不是普通的微调控件，因为我需要在其中传递一些信息.我遇到的问题是，对话框不会显示，除非我在它后面立即放置一个断点.我对Angular 的理解是同步的，所以显示对话框的代码应该在加载数据之前完成，对吗？不过，我还try 向LoadData方法添加setTimeout，以给它额外的时间.但该对话框从未出现.

该对话框是其自己的组件

<h3 mat-dialog-title>Please Wait</h3>

<mat-dialog-content>
  <div style="display:flex; flex-direction:row; justify-content:space-around ">
      We're getting your data...
    <mat-spinner [diameter]="20"></mat-spinner>
  </div>
</mat-dialog-content>

<mat-dialog-actions></mat-dialog-actions>

Typescript 文件为空

import { Component, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnInit {

  constructor(
    public spinnerRef: MatDialogRef<SpinnerComponent>
  ) { }
 
  ngOnInit(): void {
  }

}

我正在将微调器和数据加载到组件ngOnInit中:

  ngOnInit(): void {

    this.showSpinner();
    setTimeout(() => this.loadData(), 3000);
    this.hideSpinner();
  }

以下是showSpner和hideSpner函数:

private showSpinner(): void {

    const spinnerConfig = new MatDialogConfig();
    spinnerConfig.disableClose = true;
    spinnerConfig.autoFocus = true;
    spinnerConfig.width = '400px';
    spinnerConfig.height = '150px';
    spinnerConfig.closeOnNavigation = false;
    spinnerConfig.disableClose = true;
    spinnerConfig.hasBackdrop = true;

    this.spinner.open(SpinnerComponent, spinnerConfig)
  }

  private hideSpinner(): void {
    this.spinner.closeAll()
  }

Load Data方法进行几个服务调用来获取下拉字段的数据.这是一个示例，总共有4个函数调用

  private loadData(): void {
    this.projectService.getAllProjects().subscribe((data) => {
      this.projects = data;
    }, (error) => {
      console.log("an error occured in the project service");
    })