如何拦截单击的选项？

Question

我正在使用 Angular 6 开发一个 Web 应用程序。我在这个项目中使用 bootstrap-select 库来实现动态组合框。我不太了解图书馆，但是 我需要一种方法来拦截用户单击选项元素。例如，在这段代码中（使用库）：

<select class="form-control selectpicker"
        data-live-search="true"
>
<option *ngFor="let option of options" [value]="option.value" 
[selected]="selectedOption == option">{{option.label}}</option>
</select>

我希望用户在单击选项菜单项时启动拦截当前<option> 名称的方法。 经典的(click)="method(currentOption)" 事件不适用于<option> 元素。我怎么才能得到它？谢谢！

Answer 1

使用(change)="yourMethod()" 和[(ngModel)]="selectedOption"。您必须在组件类上定义一个名为 selectedOption 的属性：

<select 
  class="form-control selectpicker"
  data-live-search="true"
  (change)="onChange($event)"
  [(ngModel)]="selectedOption">
  <option 
    *ngFor="let option of options" 
    [value]="option.value" 
    [selected]="selectedOption == option">
    {{option.label}}
  </option>
</select>

---

这里有一个Working Sample StackBlitz 供您参考。