Angular中如何为多个下拉框设置已选中值

1. 修正核心数据绑定逻辑 #

当前所有下拉框绑定到同一个变量theKeysOfTheObjToArrayOfObjects，导致所有下拉框共享选中值，这是无法独立回显的核心问题。需要改为数组形式，让每个下拉框对应数组中的独立元素：

在组件TS中添加存储选中状态的数组：

// 存储每个下拉框的选中状态，长度与下拉框数量一致
selectedStatuses: { value: string }[] = [];

2. 从后端数据初始化选中状态 #

在获取到后端返回的数据（如objectToArrayOfObjects）后，遍历数据将每个状态值匹配到statusOptions中的对应对象，填充到selectedStatuses数组：

// 在获取后端数据后执行初始化
initSelectedStatuses() {
  this.selectedStatuses = this.objectToArrayOfObjects.map(item => {
    // 必须匹配statusOptions中的对象实例（mat-select依赖对象引用匹配选中状态）
    return this.statusOptions.find(opt => opt.value === item.value) || this.statusOptions[0];
  });
}

3. 调整模板绑定与事件 #

修改模板中的mat-select绑定，用索引对应数组元素，同时移除冗余的click事件（双向绑定已足够处理选中变化）：

<table style="width:100%" *ngIf="show">
  <tr>
    <th>Day Counter</th>
    <td *ngFor="let obj of objectToArrayOfObjects">{{obj.key}}</td>
  </tr>
  <tr>
    <th>Status</th>
    <td *ngFor="let i of nrOfInputsArr; let index = index">
      <mat-form-field style="width: 35px; height: 15px" appearance="outline">
        <mat-label></mat-label>
        <mat-select [(ngModel)]="selectedStatuses[index]" style="width:35px">
          <mat-option 
            *ngFor="let option of statusOptions"
            [value]="option">
            {{option.value}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </td>
  </tr>
</table>

4. 调整数据提交逻辑 #

提交到后端时，直接从selectedStatuses数组提取值，转换成后端需要的格式：

// 转换为后端要求的processedDays格式
getProcessedDays() {
  const processedDays: { [key: string]: string } = {};
  this.objectToArrayOfObjects.forEach((item, index) => {
    processedDays[item.key] = this.selectedStatuses[index].value;
  });
  return processedDays;
}

// 保存时调用
saveData() {
  const submitData = {
    ...this.data,
    processedDays: this.getProcessedDays()
  };
  // 调用后端接口提交submitData
}

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