Bootstrap模态框中Mat-autocomplete组件不显示问题咨询

Mat-autocomplete 默认将下拉面板挂载在全局 <body> 节点下，和 Bootstrap 模态框属于独立的堆叠上下文，仅调整全局 z-index 无法解决跨堆叠上下文的层级问题；同时 Bootstrap 模态框默认设置了内容溢出裁切规则，也会隐藏超出模态框范围的下拉面板。

1. 调整自动完成面板挂载规则 #

在使用 Mat-autocomplete 的组件的 @Component 装饰器中添加如下 provider 配置，调整浮层的滚动策略，避免面板位置偏移：

import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, Overlay } from '@angular/cdk/overlay';

@Component({
  // 原有组件配置保留
  providers: [
    {
      provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
      useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.reposition(),
      deps: [Overlay]
    }
  ]
})

同时在模板中给 mat-autocomplete 组件添加自定义面板类，方便后续样式调整：

<input matInput [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" panelClass="modal-autocomplete-panel">
  <!-- 下拉选项代码 -->
</mat-autocomplete>

2. 替换原有CSS样式 #

删除你之前添加的样式，替换为如下代码：

/* 关闭模态框内容溢出裁切，避免下拉面板被隐藏 */
.modal .modal-content {
  overflow: visible !important;
}

/* 提高自动完成面板层级，确保高于模态框和遮罩层 */
.modal-autocomplete-panel, .cdk-overlay-container, .cdk-overlay-pane {
  z-index: 99999 !important;
}

3. 生效验证 #

如果调整后仍无法正常显示，检查两个配置项：

• 确认 Bootstrap 模态框没有自定义更高的 z-index 样式覆盖
• 确认自动完成绑定的选项数据源不为空，没有控制台报错

内容的提问来源于stack exchange，提问作者Elham Dabiri