如何在ng2-select中實現“全選”和“全選”功能

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>

在組件中，我有項目列表和選定值列表

 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>和selected函數的值是EventEmitter<SelectItem>類型，因此可以在組件中手動調用此函數（removed或selected），您可以根據需要多次調用它。因此，取消選擇所有，我們需要遍歷項目的總數並調用remove（）函數，同時相應地傳遞適當的參數。 我們對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
   }
}