角度10：有什么方法可以获取所选的DataList对象

问题描述

正在使用DataList创建输入字段。我试图获取与选定选项关联的对象。我能够获取所选值，但不能获取整个对象。我看过一些较早的文章，其中“数据列表”项是唯一的。在这种情况下，我们可以根据所选项目过滤结果，并且只有一个对象对应于所选值。

就我而言，DataList项不是唯一的。

public userDetails：数组= [ {userID：1，userName：'用户1'}，{userID：2，userName：'用户2'}，{userID：11，userName：'用户1'}]

在这里，我们显示的项目是userName，并且不是唯一的。我需要获取与所选项目相对应的用户ID。

<input type="text" class="form-control" list="datalist1"/>
<datalist id="datalist1">
     <option *ngFor="let user of userDetails" [value]="user.displayName" (click)="selected(user)">
         {{ user.displayName }}
     </option>
</datalist>

解决方法

您可以执行以下操作：

<input type="text" class="form-control" list="datalist1" [(ngModel)]='currentUser' (change)="selected(currentUser)"/>
<datalist id="datalist1">
     <option *ngFor="let user of userDetails" [value]="user.displayName">
         {{ user.displayName }}
     </option>
</datalist>

，然后在component.ts中：

selected(item){
    console.log('selected items : ',item)
    this.selctedUser = this.userDetails.filter((user)=>user.displayName.includes(item))

  }

当然，您必须更新要用来查找用户的字段。 这是一个示例演示：demo