Angular：HttpClient填充Select后，如何将选中ID赋值给Job对象？

问题出在你的Select控件没有和FormGroup里的managerId字段建立绑定关系，所以表单里根本捕获不到这个控件的值，才会输出undefined。咱们一步步来修正：

1. 给Select控件添加表单绑定 #

你的FormGroup里定义的是managerId字段，所以需要给Select加上formControlName指令，和这个字段对应上，同时确保你的表单容器（<form>标签）已经绑定了jobForm：

<form [formGroup]="jobForm">
  <label for="manager">Manager:</label>
  <select class="form-control" id="manager" formControlName="managerId">
    <option value="" disabled>Choose manager</option>
    <option *ngFor="let manager of managers" [value]="manager.id">{{manager.fullName}}</option>
  </select>
  <!-- 其他表单控件（title、description）也要对应加上formControlName -->
</form>

这里的关键是formControlName="managerId"必须和你FormGroup里的键名完全一致，这样Angular才能把Select的选中值同步到表单对象里。

2. 获取选中值并赋值给Job对象 #

绑定完成后，你就可以直接从表单的managerId字段拿到选中的manager ID，赋值给job对象：

// 比如在表单提交方法里
onSubmit() {
  if (this.jobForm.valid) {
    this.job.managerId = this.jobForm.value.managerId;
    // 后续的保存逻辑...
  }
}

// 或者实时监听Select值变化
ngOnInit() {
  this.jobForm.get('managerId').valueChanges.subscribe(selectedId => {
    this.job.managerId = selectedId;
  });
}

额外注意点 #

• 确认你的组件类里已经导入了ReactiveFormsModule并在模块中声明，不然formGroup和formControlName指令会失效。
• 如果需要默认选中某个manager，可以在初始化FormGroup的时候给managerId设置初始值，比如managerId: [1]（对应第一个manager的id）。

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