Angular 14中Mat-Select组件点击不显示下拉选项问题求助

问题背景 #

Angular 14应用中，表单内的mat-select字段点击后无法显示下拉选项，控制台无任何报错。已导入MatInputModule、MatSelectModule等相关模块，尝试移除mat-expansion-panel、手动编写选项而非使用*ngFor，问题依旧存在。

相关代码 #

HTML模板 #

<form
class="form-container"
[formGroup]="sampleForm"
novalidate
(submit)="submitForm(sampleForm, formDirective)"
#formDirective="ngForm">
<mat-expansion-panel expanded>
  <mat-expansion-panel-header>
    <mat-panel-title
      ><b>About you</b></mat-panel-title
    >
  </mat-expansion-panel-header>
  <mat-form-field appearance="outline" class="col-lg-5 col-md-5 col-sm-12">
    <mat-label
      ><b>Gender</b></mat-label
    >
    <mat-select formControlName="gender">
      <mat-option
        *ngFor="let gender of genderOptions"
        [value]="gender.value"
      >
        {{ gender.label }}
      </mat-option>
    </mat-select> </mat-form-field
  >
</mat-expansion-panel>
</form>

组件TS代码 #

import { Component, OnInit } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormGroupDirective,
} from '@angular/forms';


@Component({
  selector: 'app-sample-component',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.scss'],
})
export class SampleComponent implements OnInit {
  genderOptions: any[] = [
    { label: 'Male', value: 'MALE' },
    { label: 'Female', value: 'FEMALE' },
    { label: 'Other', value: 'OTHER' },
    { label: 'Prefer not to say', value: 'NOSAY' },
  ];
  sampleForm: FormGroup = this.fb.group({
    gender: []
  })
  constructor(private fb: FormBuilder) {}
  ngOnInit() {}

  submitForm(form: FormGroup, formDirective: FormGroupDirective) {
    console.log('form => ', form);
  }
}

已导入的模块（app.module.ts） #

MatButtonModule,
MatCheckboxModule,
MatInputModule,
MatSelectModule,
MatProgressSpinnerModule,
MatSidenavModule,
MatDialogModule,
MatIconModule,
MatMenuModule,
MatCardModule,
MatFormFieldModule,
MatTooltipModule,
CdkAccordionModule,
MatExpansionModule,
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,

相关依赖版本（package.json） #

"@angular/animations": "^14.0.0",
"@angular/cdk": "^14.0.0",
"@angular/common": "^14.0.0",
"@angular/compiler": "^14.0.0",
"@angular/core": "^14.0.0",
"@angular/forms": "^14.0.0",
"@angular/material": "^14.0.0",

解决思路 #

• 调整下拉面板层级：mat-select的下拉面板可能被其他元素遮挡，可通过修改z-index解决。在组件样式或全局样式中添加：

  ::ng-deep .mat-select-panel {
    z-index: 10000 !important;
  }
  

  注意：::ng-deep已标记为deprecated，长期维护建议在全局样式文件中针对组件选择器设置样式。

• 明确FormControl初始值：将表单控件初始值设为null，避免状态异常：

  sampleForm: FormGroup = this.fb.group({
    gender: [null]
  })
  

• 确认Material主题导入：确保全局样式文件（如styles.scss）已导入Angular Material预构建主题：

  @import '@angular/material/prebuilt-themes/indigo-pink.css';
  

  缺少主题会导致组件渲染异常，包括下拉面板不可见。

• 排查父容器样式冲突：检查form-container、mat-expansion-panel等父容器是否设置了overflow: hidden，该属性会截断下拉面板，需移除或调整。

• 验证CDK Overlay模块：mat-select依赖CDK的Overlay模块实现弹出层，确保CdkOverlayModule已导入模块：

  import { CdkOverlayModule } from '@angular/cdk/overlay';
  

  将其添加到imports数组中。

• 隔离测试组件：创建空白组件，仅保留mat-select核心代码，验证是否能正常展开，排除其他组件或全局样式的干扰。

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