Question

我开发了角度自动完成功能，但是我认为它不起作用...

我发现问题在于下拉菜单出现在Modal ...

下

有人知道我该怎么解决吗？

谢谢！

我的Stackblitz

HTML

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#taskM">
    Open modal
  </button>

<div class="modal fade animate" id="taskM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-lg modal-dialog-scrollable modalTask" role="document">
        <div class="modal-content modelTask">
          <div class="modal-header">
            <p class="heading Catitle">
              New 
            </p>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true" class="white-text">×</span>
            </button>
          </div>
          <div class="modal-body">


         <mat-form-field style="position:absolute;">
  <mat-chip-list #chipList>
    <mat-chip
        *ngFor="let engineer of chipSelectedEngineers"
        [selectable]=true
        [removable]=true
        (removed)="removeEngineer(engineer)">
        {{engineer.fullName}}
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
    <input
        placeholder="Users"
        #engineerInput
        [formControl]="engineerControl"
        [matAutocomplete]="auto"
        [matChipInputFor]="chipList"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
        [matChipInputAddOnBlur]=true
        (matChipInputTokenEnd)="addEngineer($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="engineerSelected($event)">
    <mat-option *ngFor="let thisEngineerName of filteredEngineers | async" [value]="thisEngineerName">
        {{thisEngineerName}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

          </div>
          <div class="modal-footer">

          </div>
        </div>
      </div>
    </div>

Answer 1

您的模态z-index为1050，而下拉菜单的z-index容器为1000。

如果将下拉类的CSS更改为1051，它将位于模式上方。

.cdk-overlay-container {
  position: fixed;
  z-index: 1051;
}

Answer 2

问题在于模态和选项都具有z-index: 1040;，您需要增加选项的z-index。所以您需要添加

.cdk-overlay-container {
  z-index: 1050;
}

最好在您的全局CSS中（对我来说，它仅在全局css中才起作用）

修改在@Harry和@AndreiGheorghiu评论后，最佳做法是：

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

您可以在this答案和官方docs中进一步了解::ng-deep。

Answer 3

将这些CSS添加到您 app.component.css ：

::ng-deep .modal-backdrop.fade.in{ z-index: 999 !important; }
::ng-deep .modal { z-index: 1000 !important; }

完成工作stackblitz here

Answer 4

您需要将z-index更改为更高的数字。为确保其正常工作，请如下设置！important。

.cdk-overlay-container {
  position: fixed;
  z-index: 1052 !important;
}

角度-下拉菜单出现在模态下方

4 个答案: