@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选择/ng选择v.7

当弹出窗口被渲染并显示选择选项时，我无法在鼠标单击时选择选项。我可以使用箭头键选择一个选项，然后按Enter键，我可以将鼠标悬停在元素上，它们就会高亮显示。但当我点击时，它什么也不做，没有事件，控制台中没有js错误，什么都不做。

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

注意：我已经尝试添加appendTo="body"-没有运气

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

Answer 1

解决方案很简单：如何将`trackBy`与`ngFor一起使用`我添加了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; 
}