HTML только для отображения метки

Question

Я хочу создать выпадающий список с панелью поиска, где вы можете ввести строку и выбрать строку, но вместо этого значение поля - это число (не заметно).

Тем не менее, все, что у меня есть попытался привести к отображению числа и строки. Как я могу это исправить? Это HTML для списка.

<tr>
  <td>
    <label>Owner:</label>
  </td>
  <td><input #owner type="text" name="owners" list="owners"></td>
  <datalist id="owners">
        <option *ngFor="let ownerElem in owners" value="{{ownerElem.id}}" label="{{ownerElem.name}}"/>
      </datalist>
</tr>

Вот как это выглядит

Что мне нужно изменить, чтобы число было не отображается, а также не заполняется в текстовом поле при выборе значения?

Answer 1

Пожалуйста, попробуйте это.

<option 
*ngFor="let ownerElem in owners" 
(change)="selectedOwnre($event)"
[value]=ownerElem.id >
{{ ownerElem.name }}
</option>

ts file

selectedOwnre(event){
 console.log(event)
}

Answer 2

При использовании 'option' будет отображаться 'value'.

Попробуйте этот подход.

<option *ngFor="let ownerElem in owners" (change)="selectOwnerElem(ownerElem)">{{ownerElem.name}}</option>

Вы должны создать функцию 'selectOwnerElem', которая будет делайте логи c при выборе опции.