如何在 ng2-select 中实现“全选”和“取消全选”功能答案

【问题标题】：How to achieve "Select All" and "Unselect All" functionality in ng2-select如何在 ng2-select 中实现“全选”和“取消全选”功能
【发布时间】：2017-01-29 06:57:35
【问题描述】：

我正在尝试使用 ng2-select 实现多选这里是可以查看块代码，

<ng-select 
            [multiple]="true" 
            [items]="items" 
            [disabled]="disabled" 
            (data)="refreshValue($event)" 
            (selected)="selected($event)" 
            (removed)="removed($event)"
            placeholder="Select from list"></ng-select>

在组件中我有项目列表和选定值列表

 private value:any = [{id: "1", text: "User A"}];
  private items:Array<Object> = [{id: "1", text: "User A"},{id: "2", text: "User B"},{id: "3", text: "User C"}];

  private selected(value:any) {
    console.log('Selected value is: ', value);
  }

  private removed(value:any) {
    console.log('Removed value is: ', value);
  }

  private refreshValue(value:any) {
    this.value = value;
  }

如何在其中实现“全选”和“取消全选”功能，并且 ng-select 不会填充视图中的选择项。

【问题讨论】：

即使这是较旧的帖子，也无法发布重复问题的重复答案，因此如果您需要答案，请参阅stackoverflow.com/a/54544217/1148107

标签： angular multi-select selectall

【解决方案1】：

传递给删除和选定函数的值是类型 EventEmitter<SelectItem>，因此要在您的组件中手动调用此函数（已删除或已选择），您可以根据需要多次调用它。因此，要取消全选，我们需要遍历项目总数并调用已删除（ ) 函数，同时相应地传递适当的参数。我们对 selectAll() 函数重复相同的过程，但在这种情况下，我们将在循环中调用 select() 函数。下面是代码的分解。我没有测试过，但这应该可以工作。

unselectAll():void {
  for(let i:number=0;i<items.length;i++){
     this.removed(items[i]);//we remove each SelectItem by invoking the removed function for each loop  
   }
} 

selectAll():void {
  for(let i:number=0;i<items.length;i++){
     this.selected(items[i]);  //we select the SelectItem by invoking the selected function for each loop
   }
}

【讨论】：