角材质下拉引导莫代尔内(Angular Material Dropdown inside Boots

我有一个角5的应用程序，必须使用角材质的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带来角材料的选择选项前面。 但问题是什么课？ 我试图把它应用到从角材质多个类，但无济于事。 以下所有的都失败了：

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带来了选择选项的模态中脱颖而出？

谢谢！

Answer 1:

我经历了同样的问题与角料6/4，引导我在styles.scss文件来解决问题与下面的样式 -

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

文章来源: Angular Material Dropdown inside Bootstrap Modal