Angular 10：有什么方法可以获取选定的 DataList 对象答案

【问题标题】：Angular 10 : Is there any way to get the selected DataList objectAngular 10：有什么方法可以获取选定的 DataList 对象
【发布时间】：2021-01-14 02:41:50
【问题描述】：

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

在我的例子中，DataList 项不是唯一的。

公共用户详细信息：数组 = [ {userID: 1, userName: 'user 1'}, {userID: 2, userName: 'user 2'}, {userID: 11, userName: 'user 1'}]

这里我们显示的项目是用户名，它不是唯一的。我需要获取所选项目对应的用户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>

【问题讨论】：

标签： html angular typescript html-datalist

【解决方案1】：

你可以这样做：

<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

【讨论】：

我已经尝试过这个解决方案。对我来说，问题是列表项不是唯一的。
你看演示了吗？它为您提供与所选项目匹配的所有元素。如果这不是您想要的，请详细说明您的问题.. 您想要实现的目标
是的，我已经检查了您的演示。感谢您的回答。我能够检索与所选项目匹配的所有元素。但我需要的是只获取选定项目的对象。我已经详细阐述了我的问题，希望它现在更具可读性。