Angular中ngFor下拉框选择时获取多关联值的技术问题

我来帮你搞定这个需求！在Angular里要实现选中项目后自动填充projectManagerId和projectManagerEmail，其实有两种很实用的方案，我给你一步步拆解：

方案一：绑定整个项目对象到选项值，通过valueChanges自动同步 #

这种方法最直观，直接把整个project对象绑定为选项的value，然后监听表单控件的变化来同步字段。

修改HTML代码 #

把原来的value="{{project?._id}}"改成[value]="project"，这样选中后project表单控件的值就是完整的项目对象：

<!-- PROJECT -->
<div class="form-group col-sm-4">
  <label>Project</label>
  <select class="custom-select form-control" formControlName="project">
    <option *ngFor="let project of projects" [value]="project">{{ project.projectTitle | titlecase }}</option>
  </select>
</div>

修改TS代码 #

在初始化表单后，添加valueChanges监听，当选中项目变化时，自动填充项目经理的ID和邮箱：

// INITIATE THE FORM
this.requestForm = this.fb.group({
  userId: this.currentUser.id,
  userEmail: this.currentUser.email,
  projectManagerId: '',
  projectManagerEmail: '',
  department: '',
  project: '',
  episode: '',
  requestItems: this.fb.array([
    this.fb.group({
      timecodeIn: '',
      timecodeOut: '',
      reason: '',
      line: '',
      note: ''
    })
  ])
});

// 监听项目选择变化，同步项目经理字段
this.requestForm.get('project')?.valueChanges.subscribe(selectedProject => {
  if (selectedProject) {
    // 用patchValue批量更新表单字段
    this.requestForm.patchValue({
      projectManagerId: selectedProject.projectManager._id,
      projectManagerEmail: selectedProject.projectManagerEmail
    });
  } else {
    // 未选中项目时清空字段
    this.requestForm.patchValue({
      projectManagerId: '',
      projectManagerEmail: ''
    });
  }
});

注意：如果你的后端只需要project._id而不是整个对象，提交表单前可以把project字段的值替换成selectedProject._id，或者单独维护一个projectId表单控件，避免提交冗余数据。

方案二：保留project._id作为选项值，通过(change)事件手动同步 #

如果不想改变project控件存储的是ID的逻辑，可以用change事件来处理，通过选中的ID找到对应的项目对象，再填充字段。

修改HTML代码 #

保留value="{{project?._id}}"，添加(change)事件绑定：

<!-- PROJECT -->
<div class="form-group col-sm-4">
  <label>Project</label>
  <select class="custom-select form-control" (change)="onProjectSelected($event)" formControlName="project">
    <option *ngFor="let project of projects" value="{{project?._id}}">{{ project.projectTitle | titlecase }}</option>
  </select>
</div>

修改TS代码 #

添加onProjectSelected方法，处理选中事件：

onProjectSelected(event: Event) {
  // 获取选中的项目ID
  const selectedProjectId = (event.target as HTMLSelectElement).value;
  // 在projects数组中找到对应的项目对象
  const selectedProject = this.projects.find(project => project._id === selectedProjectId);
  
  if (selectedProject) {
    this.requestForm.patchValue({
      projectManagerId: selectedProject.projectManager._id,
      projectManagerEmail: selectedProject.projectManagerEmail
    });
  } else {
    this.requestForm.patchValue({
      projectManagerId: '',
      projectManagerEmail: ''
    });
  }
}

两种方案都能实现你的需求，选哪种取决于你是否需要保留project控件存储ID的原有逻辑。提交表单时，projectManagerId和projectManagerEmail已经被正确填充，就能一起保存到数据库啦！

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