如何解决角度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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。