为什么 mat-select 在模态内不起作用?onclick 它显示了 Modal 后面的选项 [英] why mat-select not working inside the modal ? onclick it shows options behind the Modal

问题描述

我使用了 ngx-bootstrap Modal.但是当我在其中使用 mat-select 时遇到了问题.垫选择选项显示在 Modal 后面.我已经有了这些解决方案这里的解决方案和也是这个

i Used the ngx-bootstrap Modal. But i faced problem when i used the mat-select inside of it . The mat-select Options display behind the Modal . i already these solutions here solution and 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>

推荐答案

这是因为 z-index 冲突.

It's because of conflicting z-indexes.

快速修复

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

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

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

这篇关于为什么 mat-select 在模态内不起作用?onclick 它显示了 Modal 后面的选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！