Question

我正在使用ng-select，并在选定的项目上触发回调，这些回调执行一些逻辑。我遇到了一个问题，当我从列表中选择项目时，将不触发(add)事件，而是使用(change)事件。但是，如果我从列表中两次使用一项，则更改事件不会触发，因为它是更改事件。

<ng-select 
    [clearSearchOnAdd]="true"
    (change)="changeLeagueOwner($event)"
    (add)="test()" ---> nothing here
    [clearable]="false"
    [items]="adminLeagueMembers"
    bindLabel="display_name">
</ng-select>

Answer 1

change事件仅在值更改时触发。如果您想在同一项选择两次的情况下触发事件，请使用点击功能

<ng-select 
    [clearSearchOnAdd]="true"
    (click)="changeLeagueOwner($event)"
    (add)="test()" ---> nothing here
    [clearable]="false"
    [items]="adminLeagueMembers"
    bindLabel="display_name">
</ng-select>

Answer 2

经过研究，我找到了解决方案：

为了使(add)事件无法正常工作，而我改用(change)，我添加了 ElementRef列出

<ng-select 
    #changeowner       
</ng-select>

在我的组件内部：

@ViewChild ('changeowner') changeOwnerRef: ElementRef;

在内部回调中，只需将false设置为所选项目的selected属性

this.changeOwnerRef['itemsList']['_items'].forEach((item) => {
    for (const value in item) {
      if (value === 'selected') {
        item[value] = false;
      }
    }
});

Answer 3

仅出于完成的目的，the documentation中描述了(add)在您的示例中不起作用的原因：

当[multiple] =“ true”时添加项目时，会触发
（add）。输出添加的项目

角度ng-select和添加事件

3 个答案: