angular - 为什么 mat-select 不能在模态内工作？ onclick 它显示模态后面的选项

Question

我使用了 ngx-bootstrap 模式。但是当我在其中使用 mat-select 时，我遇到了问题。 mat-select Options 显示在 Modal 后面。 我已经有了这些解决方案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-index 冲突。

快速修复

Modify the template css/scss where the modal and mat-select are placed

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