Angular中用ngFor生成下拉框时如何单独保存选中值及解决对象序列化问题

问题原因分析 #

1. 下拉框同步变化：所有下拉框绑定了同一个selectedFixtureParticipant$变量，导致选中任意一个下拉框时，所有下拉框的ngModel都会同步更新。
2. 对象打印显示[Object object]：HTML的select标签中，[value]只能绑定字符串类型的值，当绑定对象时会被自动转为字符串[Object object]，无法传递完整对象。

解决方案及代码修改 #

1. 组件TS代码修改

将单个选中变量替换为键值对对象，用Fixture的id作为键，单独存储每个Fixture对应的选中参与者：

@Component({
  selector: 'fixtures',
  templateUrl: './fixtures.component.html',
  styleUrls: ['./fixtures.component.css']
})
export class FixturesComponent implements OnInit{
  fixtures$: Observable<any> | undefined;
  // 用键值对存储每个Fixture对应的选中参与者，键为fixture.id
  selectedParticipants: { [fixtureId: string]: any } = {};

  constructor(private _service: WebSocketService) {}

  ngOnInit() {
    this.fixtures$ = this._service.getFixtures();
  }

  // 新增fixtureId参数，明确更新哪个Fixture的选中项
  onChange(fixtureId: string, newValue: any) {
    this.selectedParticipants[fixtureId] = newValue;
    // 现在可以正常打印对象
    console.log('选中的参与者:', newValue);
    console.log('JSON格式:', JSON.stringify(newValue));
  }
}

2. HTML模板修改

• 将[ngModel]绑定到对应Fixture的选中项selectedParticipants[fixture.id]
• 将option的[value]替换为[ngValue]，支持绑定对象类型
• 修改(ngModelChange)传递当前Fixture的id和选中值：

<tr *ngFor="let fixture of fixtures$ | async; let i=index">
  <th scope="row"> {{i + 1 }} </th>
  <th scope="row">{{ fixture.id }}</th>
  <th scope="row">
    <select class="form-select form-select-sm" 
            [ngModel]="selectedParticipants[fixture.id]" 
            (ngModelChange)="onChange(fixture.id, $event)">
      <option selected disabled>Select Fixture Participant</option>
      <option *ngFor="let fixtureParticipant of fixture.fixtureParticipants" 
              [ngValue]="fixtureParticipant">
        {{ fixtureParticipant.participantId }}
      </option>
    </select>
  </th>
  <th scope="row">{{ fixture.sportId }}</th>
  <th scope="row">{{ fixture.locationId }}</th>
  <th scope="row">{{ fixture.leagueId }}</th>
  <th scope="row">{{ fixture.startDate.replace("T", " ") }}</th>
</tr>

效果验证 #

• 每个下拉框的选中状态独立，修改其中一个不会影响其他下拉框
• 选中参与者时，console.log可以正常输出完整对象，JSON.stringify也能正确序列化对象

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