如何使事件侦听器为<select><option>窗体的角度？

Question

当用户单击<select><option>视图中的一个选项时，我希望控制器中的一个处理程序函数能够触发。MDN Web文档说要这样做：

<label>Choose an ice cream flavor:
  <select class="ice-cream" name="ice-cream">
    <option value="">Select One …</option>
    <option value="chocolate">Chocolate</option>
    <option value="sardine">Sardine</option>
    <option value="vanilla">Vanilla</option>
  </select>
</label>

<div class="result"></div>

const selectElement = document.querySelector('.ice-cream');

selectElement.addEventListener('change', (event) => {
  const result = document.querySelector('.result');
  result.textContent = `You like ${event.target.value}`;
});

我复制和粘贴HTML冰淇淋采摘器到一个角度HTML视图。然后我在控制器上做了：

export class AppComponent {
  selectElement: any;
  result: any;

  ngOnInit() {
    this.selectElement = document.querySelector('.ice-cream');

    this. selectElement.addEventListener('change', (event) => {
      this.result = document.querySelector('.result');
      console.log(${event.target.value});
    });
  }
}

那不管用。我们不是已经有角度的事件侦听器了吗？我可以这样做吗？

<form (select)="onSelect()">
  <label>Choose an ice cream flavor:
    <select class="ice-cream" name="ice-cream">
      <option value="">Select One …</option>
      <option value="chocolate">Chocolate</option>
      <option value="sardine">Sardine</option>
      <option value="vanilla">Vanilla</option>
    </select>
  </label>
</form>

我希望表单知道用户何时选择一个选项，然后启动处理程序函数并传递所选内容。

Answer 1

在选择标签中使用更改方法

<select (change)="updateSorting($event)">
  <option disabled selected>Sorting</option>
  <option value="pointDes">pointDes</option>
  <option value="timeDes">timeDes</option>
  <option value="timeAsc">timeAsc</option>
  <option value="pointAsc">pointAsc</option>
</select>