角度材料选择下拉菜单前的自举模态

Question

我正在构建一个有角度的应用程序，并遇到一个奇怪的错误。我尝试了几件事，并寻找了几个答案。

我在表单中有一个简单的自举模态和一个有角度的材料垫选择。

这里是我要参考的图像。

此处提供代码：

<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>

一切似乎都很好，但是下拉列表显示在模式之后。

我尝试过的一些事情：

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

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

还没有找到可行的解决方案，现在进行了2天。