angular - Bootstrap Modal 内の Angular Material ドロップダウン

Question

mat-selectBootstrapモーダル内でAngular Materialを使用する必要があるAngular 5アプリがあります。問題は、ドロップダウン オプションがモーダルの背後に表示されることです。私のコードは次のようになります。

<mat-form-field class="mdb-form-field form-adjustments">
    <mat-select placeholder="What fruit are you looking for?" [formControl]="fruitType" [(ngModel)]="defaultFruitType">
        <mat-option *ngFor="let fruitType of fruitTypes" [value]="fruitType">{{ fruitType }}
        </mat-option>
    </mat-select>
</mat-form-field>

z-indexを使用して、Angular Material の選択オプションを前面に表示する必要があることはわかっています。しかし、問題はどのクラスですか？Angular Material の複数のクラスに適用しようとしましたが、役に立ちませんでした。次のすべてが失敗しました。

body div.cdk-overlay-container {
  z-index: 99999;
}

/deep/ .cdk-overlay-pane {
  z-index: 99999 !important;
}

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

.mat-select-menu-container {
  z-index: 99999 !important;
}

.mat-dialog-container {
  z-index: 99999;
}

/deep/ .mat-select-panel {
  z-index: 99999 !important;
}

/deep/ .mat-primary {
  z-index: 99999 !important;
}

z-indexモーダルの前面に選択オプションを表示するために適用する必要があるAngular Materialのクラスを知っている人はいますか?

ありがとう！