角度 ng-select 并添加事件答案

【问题标题】：angular ng-select and add event角度 ng-select 并添加事件
【发布时间】：2021-02-16 18:24:36
【问题描述】：

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

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

【问题讨论】：

标签： angular angular-ngselect

【解决方案1】：

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

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

【讨论】：

如果我使用（点击）事件，当我打开列表时回调函数会触发，甚至在我从列表中选择一些项目之前

【解决方案2】：

为了完整起见，(add) 在您的示例中不起作用的原因在the documentation 中进行了描述：

(add) 在 [multiple]="true" 时添加项目时触发。输出添加的项目

【讨论】：

【解决方案3】：

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

为了使(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;
      }
    }
});

【讨论】：