使用ngFor生成的下拉列表选中值同步变更问题求助

我用Angular的*ngFor循环生成多行下拉列表，结果选任意一个下拉的选项时，所有下拉的选中值都会跟着变。附上问题和代码的截图：

这问题核心就是所有下拉都绑定了同一个变量，没给每行单独维护选中状态，改法如下：

方法一：给每行数据添加独立选中属性 #

1. 给你的数组里每个对象新增一个属性（比如selectedVal），用来存储当前行下拉的选中值：

   // 假设你的原数据结构类似这样
   yourDataList = [
     { id: 1, label: '行1' },
     { id: 2, label: '行2' }
   ];
   
   ngOnInit() {
     // 初始化时给每个项设置默认选中值（也可以留空）
     this.yourDataList.forEach(item => {
       item.selectedVal = '';
     });
   }
   

2. 模板里把[(ngModel)]绑定到当前行的selectedVal上，替换原来的全局变量：

   <tr *ngFor="let item of yourDataList">
     <td>
       <select [(ngModel)]="item.selectedVal">
         <!-- 你的选项内容 -->
         <option value="opt1">选项1</option>
         <option value="opt2">选项2</option>
       </select>
     </td>
   </tr>
   

方法二：使用响应式表单（FormArray） #

如果项目用了响应式表单，就给每行创建独立的FormControl并放入FormArray：

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

formGroup: FormGroup;
constructor(private fb: FormBuilder) {
  this.formGroup = this.fb.group({
    rowControls: this.fb.array([])
  });
  // 为每条数据对应生成一个表单控件
  this.yourDataList.forEach(() => {
    this.addRowControl();
  });
}

// 获取表单数组
get rowControls(): FormArray {
  return this.formGroup.get('rowControls') as FormArray;
}

// 添加行控件
addRowControl() {
  this.rowControls.push(this.fb.group({
    selectedOption: [''] // 默认值
  }));
}

模板对应修改：

<form [formGroup]="formGroup">
  <tr *ngFor="let control of rowControls.controls; let i = index">
    <td [formGroupName]="i">
      <select formControlName="selectedOption">
        <option value="opt1">选项1</option>
        <option value="opt2">选项2</option>
      </select>
    </td>
  </tr>
</form>

改完之后，每个下拉框就会独立维护自己的选中状态，不会再出现同步变化的问题。

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