Angular中Bootstrap模态框内mat-select下拉菜单层级问题解决

这个问题的核心原因是Bootstrap模态框默认的z-index（1055）高于Mat-Select下拉面板的默认z-index，而且Mat-Select的下拉面板是挂载到页面body节点下，并非模态框内部，所以会被模态框挡住。

下面是两种可行的解决方法：

方法一：自定义Mat-Select面板样式（推荐） #

这种方法不会影响其他组件的层级，是最安全的方案：

1. 在全局样式文件（如styles.scss）中添加自定义样式类：

.mat-select-panel-custom {
  z-index: 1065 !important; /* 数值需大于Bootstrap模态框的默认z-index 1055 */
}

2. 在你的mat-select组件上添加panelClass属性，指定这个自定义类：

<mat-select formControlName="studyYear" panelClass="mat-select-panel-custom">
  <mat-option value="1STPI">1STPI</mat-option>
  <mat-option value="2STPI">2STPI</mat-option>
  <mat-option value="3e">3e</mat-option>
  <mat-option value="4e">4e</mat-option>
  <mat-option value="5e">5e</mat-option>
  <mat-option value="nINSA">Je ne suis pas à l'INSA</mat-option>
</mat-select>

方法二：降低Bootstrap模态框的z-index（不推荐） #

如果不想修改Mat-Select的样式，也可以调整模态框的层级，但可能影响页面其他模态框的显示：
在全局样式文件中覆盖模态框和遮罩的z-index：

.modal {
  z-index: 1000 !important;
}
.modal-backdrop {
  z-index: 999 !important;
}

修改后重新运行项目，Mat-Select的下拉菜单就能正常显示在模态框上方了。

内容的提问来源于stack exchange，提问作者Léandre