Question

我正在尝试使用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>

并在组件I中有项目列表和选定的值列表

 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不会在视图中填充选择项目。

Answer 1

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

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
   }
}

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

1 个答案: