Angular 5模板驱动表单动态渲染下拉框异常问题求助

我碰到过好多次这种模板驱动表单联动下拉框的问题啦，你遇到的空白选项问题，本质是当第一个下拉框切换后，第二个下拉框绑定的ngModel值不在新生成的选项列表里，Angular为了匹配这个“无效”的绑定值，就自动生成了一个空白选项。下面给你几个靠谱的修复方案：

1. 切换分类时重置子分类的选中值 #

这是最直接的解决办法——在第一个下拉框切换时，把第二个下拉框的选中值重置为null，或者默认选中新列表的第一个选项。

首先在组件类里添加一个处理分类切换的方法：

onCategoryChange() {
  // 重置子分类选中值，让Angular重新匹配选项
  this.selectedSubCategory = null;
  
  // 如果想默认选中新子分类列表的第一个选项，可以改成下面这样：
  // if (this.subCategories && this.subCategories.length > 0) {
  //   this.selectedSubCategory = this.subCategories[0].id;
  // }
}

然后在模板里给第一个下拉框绑定change事件：

<select [(ngModel)]="selectedCategory" (change)="onCategoryChange()">
  <option *ngFor="let category of categories" [value]="category.id">
    {{category.name}}
  </option>
</select>

2. 确保选项值与ngModel类型严格匹配 #

有时候空白选项出现是因为绑定的value类型和ngModel变量类型不匹配——比如selectedSubCategory是数字类型，但模板里用value="{{sub.id}}"把id转成了字符串，导致Angular找不到对应的选项。

要保证类型一致，模板里应该用属性绑定的方式：

<select [(ngModel)]="selectedSubCategory">
  <option *ngFor="let sub of subCategories" [value]="sub.id">
    {{sub.name}}
  </option>
</select>

这里用[value]="sub.id"而不是value="{{sub.id}}"，能保留id的原始类型（比如数字），和selectedSubCategory的类型匹配。

3. 绑定复杂对象时用ngValue代替value #

如果你的下拉框需要绑定整个子分类对象（而不是单个id字段），那一定要用[ngValue]来绑定选项，而不是[value]——value只能绑定基本类型，ngValue可以绑定复杂对象，确保对象引用一致，避免匹配失败。

模板写法：

<select [(ngModel)]="selectedSubCategory">
  <option *ngFor="let sub of subCategories" [ngValue]="sub">
    {{sub.name}}
  </option>
</select>

对应的组件里selectedSubCategory的类型要设置为子分类对象类型，比如：

selectedSubCategory: SubCategory;

这样调整之后，切换第一个下拉框时，第二个下拉框就不会再出现多余的空白选项啦。

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