选择“全选”也会在 angular2-multiselect-dropdown 中发出 onDeSelectAll 事件答案

【问题标题】：Selecting "Select All" also emits onDeSelectAll event in angular2-multiselect-dropdown选择“全选”也会在 angular2-multiselect-dropdown 中发出 onDeSelectAll 事件
【发布时间】：2021-01-21 03:28:29
【问题描述】：

我正在使用 angular2-multiselect-dropdown。每当我在下拉菜单中单击“SelectAll”时，它不会全选，因为它也发出 deSelectAll 事件，因此它也调用 onDeSelectAll() 函数。因此它没有实现选择下拉列表中所有项目的默认功能。全选复选框也未选中。请告诉我如何才能完成这项工作，因为我很快就有截止日期了。
ts：

  ngOnInit() {
    this.dropdownList = [
      { id: 1, itemName: "Pacemaker1", value: "Pacemaker1" },
      { id: 2, itemName: "Pacemaker2", value: "Pacemaker2" },
      { id: 4, itemName: "Pacemaker2", value: "Pacemaker2" },
    ];

    this.selectedItems = [];

    this.dropdownSettings = {
      singleSelection: false,
      text: "Select devices",
      selectAllText: "Select All",
      unSelectAllText: "UnSelect All",
      enableSearchFilter: true,
      badgeShowLimit: 3,
    };
    this.getStudies();
  }

  onItemSelect(item: any) {
    this.selectedItems.push(item);
  }

  OnItemDeSelect(item: any) {
    this.selectedItems = this.selectedItems.filter((el) => el.id !== item.id);
  }

  onSelectAll(items: any) {
    console.log("select", items);
    this.selectedItems = [];
    this.selectedItems.push(items);
  }

  onDeSelectAll(items: any) {
    console.log("deselect", items);
    this.selectedItems = [];
  }

html:

 <div class="form-group">
    <label class="form-col-form-label">
       Associated Devices
    </label>
    <angular2-multiselect
        class="form-control"
        [data]="dropdownList"
        [settings]="dropdownSettings"
        (onSelect)="onItemSelect($event)"
        (onDeSelect)="OnItemDeSelect($event)"
        (onSelectAll)="onSelectAll($event)"
        (onDeSelectAll)="onDeSelectAll($event)"
        formControlName="associatedDevices">
    </angular2-multiselect>
 </div>

请在此处检查复制的功能 https://stackblitz.com/edit/angular-ivy-esame2?file=src%2Fapp%2Fapp.component.html

【问题讨论】：

尝试使用 [(ngModel)]="selectedItems" 而不是 this.selectedItems.push(items)。
@ChiruAdi 即使这样做，它也不起作用。我无法执行 SelectAll 操作。无法选中全选框
听起来控件本身正在取消选择以开始，您必须等到该事件之后才能选择它们。或者它应该是可配置的行为。实际上它不应该做任何事情。这就是为什么我不使用第三部分控制，太多的惊喜。您可以将普通选择与 [(ngModel)] 绑定或 mat-select 一起使用。这是一个 3 部分系列dev.to/jwp/angular-validation-using-ngmodel-55gf
没错，我刚刚发现这是包本身的问题。 4.6.3 版本稳定且正在运行。
面临同样问题的人请帮助我，即使@4.6.3 版本在我的情况下不起作用

标签： javascript angular typescript

【解决方案1】：

我遇到了同样的问题，你可以像这样通过 CSS 解决它

label[for=selectAll] {
  pointer-events:none;
}

【讨论】：

【解决方案2】：

我通过安装@4.6.3 版本解决了这个问题，它工作正常。显然它在包本身中是一个未解决的问题。

【讨论】：