Angular：如何通过FormControl为表格中每个下拉框单独设置值

你的问题根源在于所有下拉框绑定了同一个foodCategorySelect表单控件，不管有多少个下拉框，它们都指向同一个FormControl实例，所以选择值会同步变化。下面提供两种可行的解决方法：

方法一：使用FormArray（推荐，符合Angular表单规范） #

1. 组件类中初始化FormArray #

在组件的ngOnInit或构造函数里，根据foodItems创建FormArray，每个食品对应一个FormControl，初始值设为该食品的category Guid：

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

// 组件类内
tableForm = this.fb.group({
  categoryControls: this.fb.array([])
});

get categoryControls() {
  return this.tableForm.get('categoryControls') as FormArray;
}

constructor(private fb: FormBuilder) {}

ngOnInit() {
  // 为每个食品初始化表单控件
  this.foodItems.forEach(food => {
    this.categoryControls.push(new FormControl(food.category));
  });
}

// 提交时获取每个食品的选择值
onTableFormSubmit() {
  const selectedCategories = this.categoryControls.value;
  this.foodItems.forEach((food, index) => {
    food.category = selectedCategories[index];
    // 这里执行保存逻辑，比如传入food.Guid和选中的category
  });
}

2. 修改模板代码 #

把原来的单个formGroup换成FormArray，每个tr绑定对应的数组索引：

<form class="table_form" [formGroup]="tableForm" (ngSubmit)="onTableFormSubmit()">
  <tr *ngFor="let food of foodItems; let i = index" id="{{food.Guid}}" class="alternate-row">
    <td><label>{{food.foodName}}</label></td>
    <td><label>{{food.foodDescription}}</label></td>
    <td>
      <select class="form-control" [formControl]="categoryControls.at(i)" 
              (change)="onCategoryChange(categoryControls.at(i).value, food.Guid)">
        <option *ngFor="let foodCategory of foodCategoryList" [value]="foodCategory.Guid">
          {{ foodCategory.categoryName }}
        </option>
      </select>    
    </td>
  </tr>
</form>

注意：将<form>标签移到<tr>外层，避免每行嵌套独立表单；同时去掉[selected]属性，FormControl会自动处理选中状态。

方法二：使用动态FormControlName #

如果不想用FormArray，可以给每个下拉框分配唯一的formControlName，比如结合食品的Guid：

1. 组件类中动态创建控件 #

tableForm = this.fb.group({});

ngOnInit() {
  // 为每个食品创建独立的表单控件
  this.foodItems.forEach(food => {
    this.tableForm.addControl(`foodCategory_${food.Guid}`, new FormControl(food.category));
  });
}

// 下拉框变更时获取对应的值
onCategoryChange(foodGuid: string) {
  const selectedValue = this.tableForm.get(`foodCategory_${foodGuid}`)?.value;
  // 执行后续业务逻辑
}

2. 修改模板代码 #

<tr *ngFor="let food of foodItems" id="{{food.Guid}}" class="alternate-row">
  <td><label>{{food.foodName}}</label></td>
  <td><label>{{food.foodDescription}}</label></td>
  <td>
    <form class="table_form" [formGroup]="tableForm">
      <select class="form-control" [formControlName]="'foodCategory_' + food.Guid" 
              (change)="onCategoryChange(food.Guid)">
        <option *ngFor="let foodCategory of foodCategoryList" [value]="foodCategory.Guid">
          {{ foodCategory.categoryName }}
        </option>
      </select>    
    </form> 
  </td>
</tr>

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