Angular TypeScript mat-select两级下拉联动动态选项配置实现

核心思路是把二级选项和一级分类做结构化映射，在一级选项变更时同步更新二级选项的渲染数据源，同时处理无效值残留的问题。

代码调整步骤 #

• 结构化改造一级选项数据，将对应分类的二级选项直接挂在一级选项的子属性下，避免零散的硬编码判断
• 新增组件类变量：存储动态渲染的二级选项集合、存储二级下拉的选中值
• 改造原有一级下拉的ngModelChange事件处理方法：匹配选中的一级分类、拉取对应二级选项、清空旧的二级选中值
• 在模板中新增二级下拉组件，直接绑定动态二级选项集合做渲染

改造后的TypeScript组件代码 #

// 原有一级选项结构补充二级分类映射
options = [
  { 
    name: "ICE Drink", 
    value: 1,
    children: [
      { name: "红茶" },
      { name: "绿茶" },
      { name: "咖啡" }
    ]
  },
  { 
    name: "HOT Drink", 
    value: 2,
    children: [
      { name: "牛奶" },
      { name: "巧克力牛奶" }
    ]
  }
]

// 新增动态二级选项数据源
secondLevelOptions: any[] = [];
// 二级下拉选中值
selectedSecondOption = '';

// 改造原有一级选项选中回调方法
getselectedtableOption(selectedTypeName: string) {
  // 匹配当前选中的一级分类项
  const matchedFirstItem = this.options.find(item => item.name === selectedTypeName);
  // 同步更新二级下拉的渲染选项
  this.secondLevelOptions = matchedFirstItem ? matchedFirstItem.children : [];
  // 清空旧的二级选中值，避免跨分类残留无效选项
  this.selectedSecondOption = '';
}

改造后的HTML模板代码 #

<!-- 原有一级下拉保持原结构，仅优化label文案适配业务 -->
<mat-form-field appearance="fill">
  <mat-label>Select Drink Category</mat-label>
  <mat-select 
    [(ngModel)]="selectshowedOption" 
    (ngModelChange)="getselectedtableOption($event)" 
    name="type">
    <mat-option *ngFor="let table of options" [value]="table.name">
      {{table.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

<!-- 新增二级联动下拉 -->
<mat-form-field appearance="fill">
  <mat-label>Select Specific Drink</mat-label>
  <mat-select 
    [(ngModel)]="selectedSecondOption" 
    name="secondType"
    [disabled]="secondLevelOptions.length === 0">
    <mat-option *ngFor="let drink of secondLevelOptions" [value]="drink.name">
      {{drink.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

适配说明 #

如果你的一级下拉绑定的是value数字字段而非name字段，只需要把find方法里的匹配条件替换为item.value === selectedTypeName即可，整体联动逻辑不需要改动。当未选择一级分类时，二级下拉会自动进入禁用状态，不存在可选项时不会触发异常交互。

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