为什么mat-select不能在模态中工作？ onclick它显示了Modal背后的选项

Question

我使用了ngx-bootstrap模态。但是当我使用mat-select内部时，我遇到了问题。在模态后面的mat-select选项显示。我已经这些解决方案here solution和also this one

这是我的代码

<ng-template style="border: 0px ;z-index: 100" #editTemplate>
  <mat-form-field>
                <mat-select multiple placeholder="Multiple Cities" [(ngModel)]="currentCity" name="Paris" ariaLabel="cities[0]">
                  <mat-option *ngFor="let city of cities" [value]="city.value">
                    {{ city.viewValue }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
<ng-template>

Answer 1

这是因为z索引相互冲突。

快速解决

修改模板css / scss放置模态和mat-select的位置

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

Answer 2

由于z索引冲突，会出现此问题。在全局CSS文件中添加以下样式（styles.css文件）

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

并确保在angular.json文件中引用此样式

"styles": [ "src/styles.css", "src/......." ]

Answer 3

我发现上面的答案似乎不起作用，但下面的代码确实如此

.cdk-overlay-connected-position-bounding-box {
  z-index: 99999 !important;
}

这需要在全局（s）css文件中运行

这显示了任何打开模态的任何mat-select选项:)