仅HTML下拉列表显示标签

Question

我想用搜索栏创建一个下拉列表，您可以在其中键入字符串并选择一个字符串，但是该字段的值是数字（而不是可见的）。

但是，我尝试过的所有操作都会导致显示数字和字符串beeing。我怎样才能解决这个问题？这是列表的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>

这是它的外观

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS91SjZFUy5wbmcifQ==” alt =“这是它的外观”>

我必须更改什么，以便在选择值时不显示该数字，并且也不会在文本字段中填写该数字？

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)
}