时间戳

首页 > 解决方案 > 如何拦截单击的选项？

html - 如何拦截单击的选项？

问题描述

我正在使用 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>元素。我怎么才能得到它？谢谢！

标签： htmlangulartwitter-bootstrap-3html-selectbootstrap-select

解决方案

(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>

这是您参考的工作示例 StackBlitz。

推荐阅读