Angular “角度材质选择”下拉列表前面的引导模式

我正在构建一个有角度的应用程序，遇到了一个奇怪的bug。我试过几种方法，寻找了几种答案

我有一个简单的引导模式和一个角材料垫选择内的形式

这是我正在谈论的一幅图像，供参考

代码如下：

<form #dormForm="ngForm" (ngSubmit)="saveDorm(dormForm.value)">
  <div class="container">
    <mat-form-field>
      <mat-select ngModel [value]="dormName" name="dormName" placeholder="Pick One!" required>
        <mat-option *ngFor="let dorm of dorms" [value]="dorm.value">{{dorm.viewValue}}</mat-option>
      </mat-select>
      <mat-error *ngIf="!dormForm.valid">
        Please select a valid choice
      </mat-error>
    </mat-form-field>
    <br>
    <mat-form-field>
      <input matInput placeholder="Instructions" ngModel name="instructions" id="instructions" type="textarea">
    </mat-form-field>
    <br>
    <button mat-raised-button color="primary" type="submit" [disabled]="!dormForm.valid">Next</button>
  </div>
</form>

---

尚未找到工作解决方案，现在进行2天。

更新代码。请考虑使用角材料对话框组件，而不是混合引导和角材料！另外，这可能是引导模式的z索引比选择组件的z索引大的原因。我该如何解决这个问题？我遇到了同样的错误，主要是因为如果模式的z索引比选择下拉列表的z索引大，并且我不想使用材质对话框，这非常烦人，如果你找到了解决办法，请告诉我

.mat-select-menu-container, 
.mat-open-menu-container {
    z-index: 999999 !important;
}

.cdk-global-overlay-wrapper, .cdk-overlay-container {
    z-index: 99999 !important;
 }