Angular 4中如何用[(ngModel)]创建独立实例，避免下拉框选中值同步

嘿，我完全懂你现在遇到的困扰！你当前的问题根源在于所有下拉框都绑定到了同一个变量slecVal，所以不管你选哪个下拉框的选项，所有列表项的选中值都会跟着变。要实现每个下拉框独立控制自己的选中值，我们需要给每个列表项单独分配一个存储选中值的属性。

步骤1：调整你的数据结构 #

把原来单纯的字符串数组arrName改成对象数组，每个对象里包含列表项的名称，以及一个用来存储对应下拉框选中值的属性（比如selectedColor）。示例代码如下：

// 在你的组件类中
arrName = [
  { name: '项1', selectedColor: '' },
  { name: '项2', selectedColor: '' },
  { name: '项3', selectedColor: '' }
];
colors = ['红色', '蓝色', '绿色']; // 这里是你的颜色选项数组

如果你的arrName是从其他地方获取的普通字符串数组，可以用map方法快速转换：

originalArrName = ['项1', '项2', '项3']; // 原始数组
arrName = this.originalArrName.map(item => ({ name: item, selectedColor: '' }));

步骤2：修改模板代码 #

在*ngFor循环中，把每个循环项绑定到对象的selectedColor属性上，这样每个下拉框就有了独立的绑定目标：

<div *ngFor="let item of arrName" >
  {{item.name}} 
  <input type="text"> 
  <select [(ngModel)]="item.selectedColor">
    <option *ngFor="let cl of colors" [value]="cl">{{cl}}</option>
  </select>
</div>

为什么这样能解决问题？ #

现在每个循环生成的列表项都有自己的selectedColor属性，当你选择第一个下拉框的红色时，只会更新第一个item的selectedColor值，其他列表项的选中值依然保持各自的状态，完全不会互相影响。

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