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

Question

我使用了ngx-bootstrap模态.但是当我使用mat-select内部时,我遇到了问题.在模态后面的mat-select选项显示.我已经这些解决方案在这里的解决方案,并 同时这一个

这是我的代码

<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

  .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 选项:)

Answer 4

2022 年，我只需添加以下内容就可以正常工作：

::ng-deep .cdk-overlay-container {
    z-index: 9999;
}

类之前的::ng-deep选择器非常重要（不是现在已弃用的/deep/），否则它无法找到该类，因为它不在 DOM 中，也不在组件的 HTML 中。如果您想将此 CSS 更改应用于该组件及其子组件，请在::ng-deep之前添加:host选择器。有关主机和ng-deep 的更多信息请参见此处。

如果仍然不起作用，请尝试在 z-index 值后添加“ !important ”，或者尝试增加 z-index（添加更多 9）（如果您可能已有具有该 z-index 的元素）。

另一种值得考虑的途径可能是使用材料自己的模态-材料对话框。不会有 z-index 问题，但这不是这里的问题;)