Angular 对单击/选择数据列表选项元素做出反应

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>

如何获取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。