Angular Material基于服务数据实现嵌套级联选择器问题咨询

问题原因 #

• 第一个下拉框的[value]绑定的是facultadarea.name字符串，触发selectionChange时传入的是学院名称字符串，不是学院完整对象，无法读取下属部门字段
• 字段名不匹配：JSON结构里学院下属部门的字段为depcen，但TS代码中尝试读取value.depcentros，字段名不一致导致读取结果为undefined
• 两个下拉框都绑定了同一个select处理方法，选择部门时会错误触发方法覆盖depcentros的值
• 初始加载时单独请求部门列表无必要，部门数据本就挂载在对应学院对象下，额外请求反而会导致初始值异常

修复方案 #

1. 修正HTML模板 #

<mat-form-field class="select" appearance="fill">
  <mat-label>Facultad o Área</mat-label>
    <mat-select (selectionChange)="select($event.value)">
       <!-- 给默认选项绑定null值方便判断 -->
       <mat-option [value]="null">-Sin especificar-</mat-option>
       <!-- value绑定整个学院对象，而非仅名称 -->
       <mat-option *ngFor="let facultadarea of facultadareas" 
        [value]="facultadarea">
         {{facultadarea.name}}
       </mat-option>                
    </mat-select>                
</mat-form-field>
<mat-form-field class="select" appearance="fill">
    <mat-label>Departamento o Centro</mat-label>
    <!-- 第二个下拉框不需要绑定selectionChange事件 -->
    <mat-select>
       <mat-option [value]="null">-Sin especificar-</mat-option>
       <mat-option *ngFor="let depcen of depcentros" 
         [value]="depcen.name">
                    {{depcen.name}}
       </mat-option>
     </mat-select>
</mat-form-field>

2. 修正TypeScript逻辑 #

// 提前确认类型定义匹配
interface IFacultadArea {
  id: number;
  name: string;
  depcen: Idepcen[];
}
interface Idepcen {
  name: string;
}

facultadareas: IFacultadArea[] = []
depcentros: Idepcen[] = []

constructor(private facAreaService: FacultadAreaService) {}

ngOnInit() {
    // 仅需要请求学院列表即可，部门数据从学院对象中获取
    this.facAreaService.getFacultadArea().subscribe(data=>this.facultadareas = data)
  }

select(selectFacultad: IFacultadArea | null){
    // 选中默认选项时清空部门列表
    if(!selectFacultad) {
      this.depcentros = []
      return
    }
    // 用正确的字段名depcen赋值
    this.depcentros = selectFacultad.depcen || []
    console.log(this.depcentros)
}

内容的提问来源于stack exchange，提问作者Laura Díaz