Angular/TypeScript中基于id匹配接口数据实现mat-select二级下拉联动

错误原因 #

你代码中的问题有两处：

• 遍历逻辑错误：cluName本身就是对象数组，你调用forEach后拿到的element是单条对象数据，对象本身没有find方法，只有数组才有该方法，所以触发类型错误。
• 下拉选项未绑定值：你在第一个mat-select的mat-option没有设置[value]绑定，导致selectionChange事件拿到的event.value不是你预期的选中项id。

修复步骤 #

1. 补充第一个下拉的value绑定 #

给mat-option绑定对应对象的id属性：

<mat-select (selectionChange)="onOptionsSelected($event)" required placeholder="Choose Data Name">
  <mat-option *ngFor="let obj of dataName" [value]="obj.id">
    {{obj.name}}
  </mat-option>
</mat-select>

2. 重写事件处理方法 #

直接使用数组的filter方法筛选匹配id的项即可：

onOptionsSelected(event) {
  const selectedId = event.value;
  // 筛选所有id匹配的项，保留完整对象用于后续下拉渲染
  this.newArrayCluster = this.cluName.filter(item => item.id === selectedId);
  // 如果仅需要cname组成的数组，可以改成下面的写法
  // this.newArrayCluster = this.cluName.filter(item => item.id === selectedId).map(item => item.cname);
  console.log(this.newArrayCluster); 
}

3. 第二个下拉的渲染示例 #

绑定筛选后的数组渲染第二个下拉即可：

<mat-select placeholder="Choose Cluster">
  <mat-option *ngFor="let cluster of newArrayCluster" [value]="cluster.id">
    {{cluster.cname}}
  </mat-option>
</mat-select>

如果需要对重复的cname去重，可以在筛选后加一步去重处理：

this.newArrayCluster = Array.from(new Map(
  this.cluName.filter(item => item.id === selectedId).map(item => [item.cname, item])
).values());

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