Angular 4中如何动态生成ngModel？解决下拉框联动变更问题

嘿，这个问题我太熟悉了——你现在遇到的核心问题是所有动态生成的下拉框都绑定到了同一个单一变量（dbserverService.sdb.sval），所以只要修改其中一个，其他下拉框的ngModel会同步读取这个变量的新值，自然就联动了。要解决这个问题，我们需要给每个下拉框分配独立的绑定对象/变量，具体有两种常用方案：

方案一：给Dbarray的每个元素添加独立选中值属性 #

如果你的业务允许修改Dbarray的结构，最简单的方式是给数组里的每个对象新增一个存储选中值的属性（比如selectedValue），这样每个下拉框绑定到对应元素的专属属性上：

第一步：初始化Dbarray时添加属性 #

在组件的TS代码里，初始化（或处理）Dbarray时给每个元素加上默认选中值：

// 假设你的Dbarray是业务数组，给每个元素添加selectedValue属性
this.Dbarray = this.Dbarray.map(item => ({
  ...item,
  selectedValue: '0' // 默认选中第一个选项
}));

第二步：修改模板绑定 #

把ngModel从全局变量改成当前循环项的selectedValue：

<div *ngFor="let abc of Dbarray; let i=index">
  <select name="srcColumns{{i}}" [(ngModel)]="abc.selectedValue" #select{{i}}="ngModel">
    <option value="0">Select F...</option>
    <!-- 其他动态选项可继续添加 -->
  </select>
</div>

方案二：单独维护一个选中值数组（不修改原Dbarray） #

如果不想改动原Dbarray的结构，可以在组件里单独创建一个和Dbarray长度一致的数组，用来存储每个下拉框的选中值：

第一步：在组件TS中初始化选中值数组 #

// 组件类中定义数组，长度和Dbarray一致，默认值设为'0'
selectedValues: string[] = [];

// 在Dbarray加载完成后初始化这个数组
ngOnInit() {
  // 确保Dbarray已获取到数据后执行
  this.selectedValues = new Array(this.Dbarray.length).fill('0');
}

第二步：修改模板绑定到数组对应索引的元素 #

<div *ngFor="let abc of Dbarray; let i=index">
  <select name="srcColumns{{i}}" [(ngModel)]="selectedValues[i]" #select{{i}}="ngModel">
    <option value="0">Select F...</option>
    <!-- 其他动态选项 -->
  </select>
</div>

为什么原来的代码会联动？ #

你之前的代码里，所有下拉框的[(ngModel)]都指向同一个dbserverService.sdb.sval变量，Angular的双向绑定机制会在任何一个下拉框修改时更新这个变量的值，而其他所有绑定到该变量的下拉框都会同步刷新显示值，这就是联动现象的根源。

现在每个下拉框都绑定到独立的变量/属性，自然就不会互相影响啦！

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