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

Question

我需要一个只在选择了一个选项时调用方法的输入。我有一个Product []列表

Id:number 
Name:string

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

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

Answer 1

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

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

更新。

Answer 2

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

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

我使用（更改）而不是[（ngModel）]，因为我读到它对性能更好。 onProductSelect接收选定的整个对象。