如何为四个Angular Material选择框设置默认值？已尝试多种方法仍无效

我之前也遇到过类似的异步数据加载后设置下拉框默认值的坑，结合你的代码场景，给你梳理几个关键的解决方向：

1. 核心问题：异步数据加载时机不匹配 #

你提到数据来自外部JSON，这意味着数据是异步加载的。如果直接在ngOnInit或ngAfterViewInit里设置默认值，此时下拉框的选项数据还没加载完成，自然无法匹配到有效选项，导致默认值不生效。

正确的做法是：等所有下拉框的数据源加载完成后，再统一设置默认值。比如用Promise.all合并多个异步请求，在回调里处理默认值：

async ngOnInit(): void {
  // 合并所有异步数据请求，确保所有下拉框的数据源都加载完成
  const [dashData, resourcedatapro, months, demandTypes] = await Promise.all([
    this.dataService.getDashData().toPromise(),
    this.dataService.getResourceDataPro().toPromise(),
    this.dataService.getMonths().toPromise(),
    this.dataService.getDemandTypes().toPromise()
  ]);

  // 赋值到组件变量
  this.dashData = dashData;
  this.resourcedatapro = resourcedatapro;
  this.getMonth = months;
  this.demandType = demandTypes;

  // 所有数据就绪后，设置默认值
  this.setAllDefaultValues();
}

2. 确保默认值存在于选项列表中 #

每个下拉框的默认值必须是对应选项数组里的完全匹配项，还要满足模板里的渲染条件：

项目下拉框（第一个） #

注意模板里有*ngIf="proj.tharea == true || proj.Phase == true"，所以默认值必须是满足这个条件的项目：

private setAllDefaultValues() {
  // 设置项目默认值：取第一个符合条件的项目
  const defaultProject = this.dashData.find(proj => proj.tharea || proj.Phase);
  if (defaultProject) {
    this.selected = defaultProject.Project_Name;
    // 同时触发资源加载逻辑
    this.getResourcesById(defaultProject.id, this.dashData.indexOf(defaultProject));
  }
}

年份下拉框 #

年份选项的value是{ year: data.year, id: data.id }对象，所以设置默认值时必须传入相同结构的对象：

// 年份默认值：取第一个年份
if (this.resourcedatapro.length > 0) {
  const defaultYear = this.resourcedatapro[0];
  this.yearControl.setValue({ year: defaultYear.year, id: defaultYear.id });
  this.selectedYear = { year: defaultYear.year, id: defaultYear.id };
  this.selectYear({ value: defaultYear }); // 触发年份选择后的逻辑
}

月份和需求类型下拉框 #

同理，默认值必须是对应数组里的元素，比如设置当前月份为默认值：

// 月份默认值：优先取当前月份，没有则取第一个
const currentMonth = new Date().toLocaleString('en-US', { month: 'long' });
const defaultMonth = this.getMonth.find(m => m === currentMonth) || this.getMonth[0];
this.monthControl.setValue(defaultMonth);
this.selectMonth({ value: defaultMonth });

// 需求类型默认值：取第一个选项
if (this.demandType.length > 0) {
  const defaultDemand = this.demandType[0];
  this.demandControl.setValue(defaultDemand);
  this.obj = defaultDemand;
  this.selectDemandType({ value: defaultDemand });
}

3. 避免ngModel和FormControl混用冲突 #

你的模板里同时使用了ngModel和FormControl（比如年份下拉框的[formControl]="yearControl"和[(ngModel)]='selectedYear'），这种混合写法容易导致值不同步。建议统一使用响应式表单（FormControl），去掉ngModel，这样更可控：

修改模板（以年份下拉框为例）：

<mat-select [formControl]="yearControl" (selectionChange)="selectYear($event)">
  <mat-option *ngFor="let data of resourcedatapro" [value]="{ year: data.year, id: data.id }">
    {{ data.year }}
  </mat-option>
</mat-select>

组件里只需要操作yearControl即可，不需要维护selectedYear变量。

4. 触发默认值对应的业务逻辑 #

设置默认值后，别忘了手动触发对应的选择事件（比如getResourcesById、selectYear等），确保默认值设置后，相关的页面逻辑也能正常执行，比如加载对应项目的资源数据。

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