Angular - 下拉菜单出现在模态下方答案

【问题标题】：Angular - Dropdown appears below modalAngular - 下拉菜单出现在模态下方
【发布时间】：2020-03-28 15:31:54
【问题描述】：

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

我发现问题在于下拉菜单出现在 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>

【问题讨论】：

标签： css angular typescript twitter-bootstrap

【解决方案1】：

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

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

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

【讨论】：

我测试了它，但它没有工作:(你能看看我的堆栈闪电，看看我是否做错了吗？
在.cdk-overlay-container 之前添加::ng-deep，因为叠加层附加到body 元素，它不是您的组件的后代。
在我的情况下，下拉值显示在模式弹出窗口之外。我该如何解决这个问题？

【解决方案2】：

将这些css添加到你app.component.css：

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

完成工作stackblitz here

【讨论】：

我反对使用!important。这是不好的做法，因此不应在Stack Overflow 答案中使用，除非需要覆盖由 JavaScript 添加的内联样式。

【解决方案3】：

问题是modal和options都有z-index: 1040;你需要增加options z-index。所以你需要添加

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

最好在你的 globale css 中（对我来说，只有在 globale css 上才有效）

编辑在@Harry 和@AndreiGheorghiu 评论之后，最佳做法是：

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

您可以在this 答案和官方docs 中了解有关::ng-deep 的更多信息。

【讨论】：

缺少 :: ng-deep 和完美！
@Harry 没有被弃用？
@ChiKa，它没有被弃用，也不会永远被弃用。不要将/deep/（或>>>）与::ng-deep 混淆。 ::ng-deep（就像 Vue 中的 ::v-deep）是一个内部 Angular scss 组合器，它只是告诉编译器将 ::ng-deep .selector { /* rules */ } 转换为 .selector { /* rules */ } 而不是 _ngcontent-r@nd0m .selector { /* rules */ }。与其他选项不同，::ng-deep 永远不会进入 css 并且不需要浏览器支持。所以不受Chrome的deprecation of /deep/影响。
每个人都对此感到困惑，包括 Angular 团队成员。考虑到它的使用和缺乏可行的替代品（就 SPS 而言），::ng-deep 在 Angular 市场份额不显着下降的情况下是不可移除的。如果它确实被删除（最快会在 Angular 10 中），那将是一个巨大的营销错误。我说“从不”时夸大了，但至少现在不太可能。
那篇文章声称/deep/ 和>>> 是::ng-deep 的别名。只需使用每个并比较结果。将自己命名为 “angular-university” 并不能使您成为 Angular 专家。

【解决方案4】：

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

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

【讨论】：