Angular 7：使用 datalist 更改输入方法答案

【问题标题】：Angular 7: change method on input with datalistAngular 7：使用 datalist 更改输入方法
【发布时间】：2019-08-12 18:12:50
【问题描述】：

我需要一个仅在选择选项时才调用方法的输入。我有一个带有

的 Product[] 列表

Id:number 
Name:string

例如：ID：2 和名称：Coffee。我需要在建议列表中看到 Coffee，但是当我选择它时，方法只发送 ID 或整个对象。

我尝试不同的解决方案，使用价值或 attr.data-value 在 option 元素中带有 Product 的 ID，但它不起作用：当我选择一个选项时，输入字段填充的是 ID 而不是名称

【问题讨论】：

如果您使用 *ngFor="let item of Products"，您可以使用 [value]="item" 或 [value]="item.Id" 根据您只需要 id 或整个对象。你有什么尝试？

标签： angular html typescript input angular7

【解决方案1】：

如果您只想使用“名称”，只需使用 <input list="datalist" /> <datalist id="datalist"> <option *ngFor="let prod of listProd" [value]="prod.Name">{{prod.Name}}</option> </datalist>

这样，“名称”会显示在选项框中，并且您在选择它时会返回“Id”。如果您想要完整的对象，那么只需将 Product.Id 替换为 Product 即可获得所有内容

已更新。

【讨论】：

错了。我有``` ```当列表选项打开时，它显示ID名称（1咖啡），当我按下它时，输入字段填充“1”而不是“咖啡”
您是否尝试过将 [value]="prod.id" 更改为 [value]="prod.name"？还要记住你的名字是区分大小写的，所以如果你在你的对象中使用 Id 和 Name 你也必须在 html 部分使用相同的。
使用 [value] 和 {{prod.Name}} 字符串将在下拉列表中复制。 Datalist 不像选择 htmlElement。在 chrome [value] 上始终显示。我尝试使用 [attr.data-value]=prod.id 但我不知道如何从输入中截取（更改）方法中的 id

【解决方案2】：

我找到了适合我的解决方案。 ng-select 元素。 All is explained here 这是我用于解决方案的代码

<ng-select [items]="listProduct"
             bindLabel="name"
             bindValue="idProduct"
             (change)="onProductSelect($event)">
</ng-select>

我使用 (change) 而不是 [(ngModel)] 因为我读到它对性能更好。 onProductSelect 接收选择的整个对象。

【讨论】：