Angular Material select组件设置默认初始值失效该如何解决

核心失效原因 #

• 模板内直接调用getSpecificPodZg方法：Angular 变更检测每次触发都会执行该方法，方法内每次都清空并重新生成翼楼列表，导致列表频繁重绘，还没等默认值绑定完成列表就被重置，自然无法选中。
• 双向绑定冲突：mat-select同时绑定了[(value)]和[(ngModel)]两个双向绑定逻辑，二者优先级冲突导致绑定失效。
• [selected]属性优先级低于ngModel：Angular Material Select 的选中状态优先匹配ngModel绑定的值，只要ngModel对应的变量值为空/和option的value不匹配，哪怕手动加了[selected]也不会生效，另外你代码里ngFor声明的i和外层表格行的索引i重名，也会导致判断逻辑错误。

修复步骤 #

第一步：预过滤翼楼列表，禁止模板内直接调用过滤方法 #

提前在TS层把每个楼栋对应的翼楼列表预计算好存储，避免频繁重刷列表，同时在列表生成时直接赋值默认值。示例代码：

// 新增存储预过滤列表的对象
podZgMap: Record<string, any[]> = {};

// 在拿到PodZgrada全量数据、楼栋列表数据后统一调用该方法预过滤
initPodZgMap() {
  this.podZgMap = {};
  // 假设你的表格楼栋列表变量为buildingList，i为表格行索引
  this.buildingList.forEach((building, idx) => {
    const list = this.PodZgrada.filter(item => item.zg_id == building.key);
    this.podZgMap[building.key] = list;
    // 直接赋值默认值，取当前楼栋第一个翼楼的key
    if(list.length > 0) {
      this.is_selected[idx] = list[0].key;
    }
  })
}

第二步：修正模板绑定逻辑 #

删掉多余的[(value)]和[selected]绑定，直接使用预过滤的列表：

<mat-form-field  *ngIf="podZgMap[element.key]?.length" >
  <mat-label>Podzgrada</mat-label>
  <mat-select [(ngModel)]="is_selected[i]" disableOptionCentering class="mySelectClass">
    <mat-option *ngFor="let zgrada of podZgMap[element.key]" [value]="zgrada.key" required >
      {{zgrada.ime}}
    </mat-option>
  </mat-select>
</mat-form-field>

生效原理 #

Angular Material Select 会自动将ngModel绑定的值和所有mat-option的value做匹配，匹配到的选项就会自动选中，不需要手动加selected属性。我们把默认值的赋值提前到列表生成的时机，同时避免列表频繁重绘，就能保证值匹配逻辑正常执行。

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