如何从下拉选择列表中获取对象的username值而非ID存入数据库

方案1：通过下拉选中事件直接获取用户名（推荐） #

常用下拉组件都会提供选中change事件，直接在事件回调里拿到选中的完整对象给nameUser赋值即可：

1. 修改下拉组件的模板代码，添加选中事件监听（逻辑对所有前端框架的下拉组件通用，以下是Angular场景示例）：

<select [options]="listuser" [(ngModel)]="idUser" (change)="handleUserSelect($event)">
</select>

2. 在ts文件中新增选中事件处理方法：

handleUserSelect(selected: any) {
  // 排除默认的空选项
  if(selected.id !== 'empty') {
    this.nameUser = selected.text;
  } else {
    this.nameUser = '';
  }
}

完成后选中用户时nameUser会自动赋值，提交时直接使用原有obj.username=this.nameUser逻辑即可。

方案2：提交时通过选中的用户ID匹配用户名 #

如果不想修改模板代码，可以在提交逻辑里通过已有的idUser到listuser数组中匹配对应的用户名，直接修改onSubmit方法对应部分即可：

onSubmit() {
  this.submitted = true;
  if(this.messageForm.valid) {
    this.success = true;
    let obj = this.messageForm.value;
    obj.id_examen = this.idExamen;
    obj.id_coach=sessionStorage.getItem('id');
    obj.id_cible=this.idUser;
    // 新增匹配用户名逻辑
    const targetUser = this.listuser.find(item => item.id === this.idUser);
    if(targetUser?.id !== 'empty') {
      this.nameUser = targetUser?.text || '';
      obj.username = this.nameUser;
    } else {
      obj.username = ''; // 未选中用户时的默认值可自行调整
    }

    this.coachingService.addLigneExamen(obj).then(res => {
      if (res === true) {
        this.closemodal()
      }
      this.closemodal()
    });
  }
}

另外你现有selectuser方法里定义的let id = ''全程没有被赋值，后续的if (id !== '')判断永远不会触发，属于冗余代码可以直接删除。

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