Angular中Datalist选中值显示[object Object]问题解决

问题场景 #

Angular项目中，通过FormArray实现学生选择表单功能，整体逻辑正常，但选中学生后输入框会显示[object Object]，且需要表单最终存储完整的Student对象（从数据库获取）。

原表单代码 #

<div formArrayName="studentPublishing" *ngFor="let all of getstudentPublishing().controls;  index as i">
    <div class="form-group data">
        <input type="text" list="options" class="form-control" placeholder="Students" (change)="getAuthor($event,i)" [formControlName]="i" required>

        <datalist id="options">
        <option *ngFor="let c of dataStudent" [value]="c.name">{{ c.name }}</option>
        </datalist>

        <div class="rem"><button (click)="removeAuthor(i)">-</button></div>

        <div *ngIf="!formPublic.get('studentPublishing')?.valid && formPublic.get('studentPublishing')?.touched" class="validation-error">
            <p>Authors are mandatory</p>
        </div>

    </div>
</div>
<div id="add" class="add"><button type="button" (click)="addAuthor()">Author +</button></div>

原TypeScript处理函数 #

getAuthor(e: any, id:number){
    const studentName = e.target.value;
    const studentSelected = this.dataStudent.find(x => x.name === studentName);
    if (studentSelected) {
      this.getstudentPublishing().at(id).setValue(studentSelected);
    }
}

尝试过的无效方案 #

• 使用ngValue绑定选项值，输入框仍显示[object Object]
• 使用json管道转换值，未解决显示异常问题
• 将选项值设为学生名称字符串，只能保存名称而非完整Student对象

最终解决代码 #

参考Daniel Gimenez的方案，在表单提交或需要同步值时执行以下代码：

this.formPublic.updateValueAndValidity();
if(this.formPublic.valid){
  const studentControls = this.getstudentPublishing().controls;
  const students = studentControls.map(y => {
    const name = y.value;
    console.log(name);
    return this.dataStudent.find(student => student.name === name);
  });

  for (let i = 0; i < students.length; i++) {
    this.getstudentPublishing().at(i).setValue(students[i]);
    console.log(students[i]?.name);
  }
}

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