Angular多个select绑定同一ngModel联动，如何实现独立选择？

问题根因 #

所有行的Surface Type下拉框统一绑定了summary.ts中定义的全局变量surface_type，相当于所有控件共享同一个数据源，任意修改该变量的值，所有绑定它的下拉框都会同步更新选中状态。要实现各行选择互不影响，核心是把选择值的存储粒度从全局级下沉到每行数据级，让每个下拉框只绑定所属行的独立属性，不再共享全局变量。

具体修改步骤 #

1. 调整summary.ts的数据结构 #

• 删除原全局定义的共享变量surface_type
• 为每个干预行新增专属的surfaceType存储字段，动态新增表格行时同步初始化该字段的默认值
  参考实现代码：

// 定义表格行的数据结构
interface InterventionRowItem {
  // 项目原有行字段
  interventionName: string;
  interventionLocation: string;
  // 行级独立的Surface Type存储字段
  surfaceType: string;
}

// 表格数据源，数组每个元素对应一行的完整数据
interventionRows: InterventionRowItem[] = [];

// 动态新增干预行的方法
insertNewIntervention() {
  this.interventionRows.push({
    interventionName: '',
    interventionLocation: '',
    surfaceType: '' // 为新行初始化独立的Surface Type默认值
  })
}

2. 修改summary.html的绑定逻辑 #

• 将原下拉框的[(ngModel)]绑定目标，从全局的surface_type改为当前*ngFor遍历行对象的surfaceType属性
• 为每个下拉框设置唯一的name属性，满足Angular模板驱动表单的控件识别规则，避免表单控件复用
  参考实现代码：

<tr *ngFor="let row of interventionRows; let rowIndex = index">
  <td>
    <select 
      [(ngModel)]="row.surfaceType"
      [name]="'surface_type_' + rowIndex"
    >
      <option value="concrete">混凝土基面</option>
      <option value="asphalt">沥青基面</option>
      <option value="metal">金属基面</option>
    </select>
  </td>
</tr>

关键注意事项 #

• 每个select控件必须配置唯一的name属性：如果所有下拉框的name属性完全一致，Angular模板驱动表单会将其识别为同一个表单控件，即便绑定了不同的属性值，依然会出现选择联动的问题
• 不要保留原全局surface_type变量：所有行的选择值跟随对应的行对象存储，新增、删除行时的状态变化不会波及其他行
• 如果项目使用响应式表单，实现逻辑完全一致：要在FormArray中为每一行单独创建存储Surface Type的FormControl，不要创建全局共享的FormControl供所有行绑定

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