@ng-select/ng-select 选项点击没有鼠标点击事件

Question

我正在尝试向 bootstrap 模态 (ngx-bootstrap) 中内置的过滤器弹出窗口添加过滤器，但我遇到了以下问题：我的选项数组看起来像

[
   {
      "name":"All",
      "value":""
   },
   {
      "name":"Foo",
      "value":"foo"
   },
   {
      "name":"Bar",
      "value":"bar"
   },
]

模板：

    <ng-select
      (change)="updateFilter($event)"
      [(ngModel)]="value">
      <ng-option *ngFor="let option of options"
                 [value]="option.value">
        <div title="{{option.name}}">{{option.name}}</div>
      </ng-option>
    </ng-select>

@ng-select/ng-select v.7

呈现弹出窗口并显示 select 选项时，我不能 select 单击鼠标的选项。我可以 select 使用箭头键并按 Enter 的选项，我可以将鼠标悬停在元素上，它们会突出显示。但是当我点击时，它什么都不做，没有事件，控制台中没有 js 错误，什么都没有。

我只能猜测是其他东西干扰了我页面上的点击事件，但我不知道如何找到它。

注意：我尝试添加 appendTo="body" - 没有成功

UPD：简单的 trackBy 解决了我的问题。

Answer 1

解决方案很简单：我添加了 trackBy 函数来保留 ng-select 元素的值：

    <ng-select
      (change)="updateFilter($event)"
      [(ngModel)]="value">
      <ng-option *ngFor="let option of options; trackBy:identify"
                 [value]="option.value">
        <div title="{{option.name}}">{{option.name}}</div>
      </ng-option>
    </ng-select>

  identify(index, item){
     return item.name; 
  }

@ng-select/ng-select 选项点击没有鼠标点击事件

@ng-select/ng-select No mouse click event on option click

angular-ngselect

ngx-bootstrap

angular