Angular 对单击/选择数据列表选项元素使用react

Question

这有效并在单击 value2 时调用方法 hhh()

 <select name="select">
    <option value="value1">Value 1</option>
    <option value="value2" (click)="hhh()">Value 2</option>
    <option value="value3">Value 3</option>
  </select>

这不会调用点击事件

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option (click)="hhh()" value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

如何获取数据列表中的点击事件(或者更好的是选择元素的事件)？

Answer 1

datalist 与select 不是100% 相同，您需要在输入字段中添加(change)/(click)。但这可能不是您所追求的 100%。

1. 选择您的项目。
2. 使用按钮、击键 (Enter) 或将焦点留在该字段上来提交您的项目。

它是这样的:

*.component.html

<input list="browsers" name="myBrowser" (change)="onSortChange($event)">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Internet Explorer">
    <option value="Opera">
    <option value="Safari">
    <option value="Microsoft Edge">
</datalist>

*.component.ts

onSortChange(e) {
   this.sort(e.target.value);
}


sort(field: string) {
    switch (field) {
        case 'value1':

        break;
        case 'value2':

        break;
        case 'value3':

        break;
        default:
        break;
    }
}

否则您需要实现自己的 Javascript 函数，例如 this .