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)="selectOwnerElem(ownerElem)">{{ownerElem.name}}</option>

您应该创建一个函数“selectOwnerElem”，该函数将在选择选项时执行逻辑。

Answer 2

请试试这个。

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

ts 文件

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