如何修改mat-select组件下拉菜单的展开方向，避免被导航栏遮挡

方法1：单个mat-select强制向下展开 #

直接给你的mat-select标签添加panelPosition="below"属性，同时可以搭配disableOptionCentering关闭选项居中对齐，避免面板向上偏移，修改后的代码如下：

<mat-label>{{ 'CLAIMS.PLACEHOLDERS.STATUS' | translate }}</mat-label>
<mat-select 
  (valueChange)="onStatusChange($event)"
  panelPosition="below"
  disableOptionCentering
>
  <mat-option *ngFor="let option of statusses" [value]="option">
    {{ 'STATUS.' + option | translate }}
  </mat-option>
</mat-select>

注：panelPosition属性在Angular Material v14及以上版本原生支持，低于该版本可以使用下方全局配置方法。

方法2：全局配置所有mat-select默认向下展开 #

如果需要项目内所有下拉都默认向下展开，可以在根模块或者对应功能模块的providers里添加如下配置：

import { MAT_SELECT_CONFIG } from '@angular/material/select';

@NgModule({
  providers: [
    {
      provide: MAT_SELECT_CONFIG,
      useValue: {
        panelPosition: 'below',
        disableOptionCentering: true
      }
    }
  ]
})
export class YourModule { }

方法3：解决z-index层级遮挡问题 #

如果调整方向后依然出现导航栏遮挡的情况，说明下拉面板的z-index低于导航栏，你可以给mat-select添加overlayPanelClass自定义样式类提升层级：

1. 给mat-select新增属性：

<mat-select 
  (valueChange)="onStatusChange($event)"
  overlayPanelClass="custom-select-panel"
>

2. 在全局样式文件（如styles.scss）中添加样式：

.custom-select-panel {
  z-index: 9999 !important; // 数值设置为比导航栏的z-index更高即可
}

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