Угловой 7: изменить метод ввода данных с помощью datalist

Question

Мне нужны входные данные, которые вызывают метод, только когда выбрана опция. У меня есть список продукта [] с

Id:number 
Name:string

Например: ID: 2 и Имя: Кофе. Мне нужно увидеть Coffee в списке предложений, но когда я выбрал его, метод отправил только ID или весь объект.

Я пробую другое решение, используя значение или attr.data-value с идентификатором продукта в элементе option , и он не работает: когда я выбираю опцию, поле ввода заполняется идентификатором, а не именем

Answer 1

Я нашел решение, которое работает для меня.Элемент ng-select. Здесь все объясняется Это код, который я использую для своего решения

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

Я использую (изменяю) вместо [(ngModel)], потому что я прочитал, что это лучше для производительности.onProductВыберите восстановить весь выбранный объект.

Answer 2

Если вы хотите использовать «Имя», просто используйте <input list="datalist" /> <datalist id="datalist"> <option *ngFor="let prod of listProd" [value]="prod.Name">{{prod.Name}}</option> </datalist>

. Таким образом, «Имя» отображается в поле параметров, и вы получаете «Идентификатор», когда он выбран.Если вы хотите вернуть полный объект, замените Product.Id просто Product, и вы получите обратно все

Обновлено.