Angular 为什么选择不在模式内工作？单击后，将显示模式后面的选项

我使用了ngx引导模式。但当我在里面使用垫子时，我遇到了问题。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>

{{city.viewValue}}

这是因为z索引冲突

快速修复

修改放置modal和mat select的模板css/scss

---

出现此问题的原因是z索引冲突。在全局CSS文件（styles.CSS文件）中添加以下样式

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

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

---

我发现上面的答案似乎不起作用，但下面的代码起了作用

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

这需要进入一个全局（s）css文件才能工作

---

这将在任何打开的模态上显示任何mat select选项：）

不重新编译

z-index:99999！重要的完全正确。这是一个非常抽象的解决方案，只能作为最后的手段使用

在我的案例中，模态是以非标准方式打开的。如果您使用
MatDialog
服务打开它，您应该不会发现任何问题。如果有，那么您的代码就是引入它们的原因，请尽量不要用黑客攻击的方式进行修复。
您可以在SCSS文件中添加此代码链接
.cdk覆盖容器{z-index:1127；}
类cdk覆盖容器（角装备类），这是默认行为。
若要覆盖此项，只需将cdk覆盖容器z索引减少或增加到1000，使其位于组合的后面或前面，并对我来说一切正常
在哪个文件中修改css规则？在component.csw中，为什么默认情况下不在Angular Material lib中添加此项？您完全正确！我已经尝试了以上所有的解决方案，并从不同的问题中得到了答案，而你的答案是唯一有效的答案@扎赫马
"styles": [ "src/styles.css", "src/......." ]

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