Angular Material 内下拉 Bootstrap 模式

Question

我有一个 Angular 5 应用程序，它必须在 Bootstrap 模式中使用 Angular Material 的 mat-select。问题是下拉选项出现在模式后面。我的代码如下所示：

<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 的 selection 选项放在前面。但问题是 class 是什么？我尝试将它应用于 Angular Material 中的多个 classes，但无济于事。以下所有都失败了：

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

有谁知道我必须在 Angular Material 的 class 上应用 z-index 才能将 select 选项置于模式的最前面？

谢谢！

Answer 1

我遇到了与 Angular Material 6/Bootstrap 4 相同的问题。我在 styles.scss 文件中使用以下样式解决了这个问题 -

.cdk-global-overlay-wrapper {
     z-index: 1000;
}

Answer 2

我尝试了很多破解方法，但只有这个对我有用：

.cdk-overlay-container {
  z-index: 9999 !important;
}

Angular Material 内下拉 Bootstrap 模式

Angular Material Dropdown inside Bootstrap Modal

less

angular-material2

angular

angular-material-5