Question

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

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

bootstrap-select：如何拦截点击的选项？

1 个答案: