Выбор "Выбрать все" также вызывает событие onDeSelectAll в angular2-multiselect-dropdown

#javascript #angular #typescript

#javascript #угловой #машинопись

Вопрос:

Я использую angular2-multiselect-dropdown. Всякий раз, когда я нажимаю «Выбрать все» в выпадающем списке, он не выбирает все, потому что он также вызывает событие отмены выбора, и поэтому он также вызывает функцию 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/app/app.component.html

1. Попробуйте использовать [(ngModel)]=»SelectedItems» вместо this.SelectedItems.push(элементы).

2. @ChiruAdi даже делая это, он не работает. Я не могу выполнить операцию выбора. Невозможно установить флажок selectAll

3. Похоже, что сам элемент управления отменяет выбор, чтобы начать, вам придется подождать до окончания этого события, чтобы выбрать их. Или это должно быть настраиваемое поведение. На самом деле это ничего не должно делать. Вот почему я не использую элементы управления 3-й части, слишком много сюрпризов. Вы можете использовать просто select с привязкой [(ngModel)] или mat-select. Вот серия из 3 частей dev.to/jwp/angular-validation-using-ngmodel-55gf

4. Это правда, я только что узнал, что это проблема с самим пакетом. Версия 4.6.3 стабильна и работает.

5. столкнувшись с той же проблемой, кто-нибудь, пожалуйста, помогите мне, даже после версии @4.6.3 в моем случае не работает

Ответ №1:

Я решил эту проблему, установив версию @4.6.3, и она работает нормально. По-видимому, это открытая проблема в самом пакете.

Ответ №2:

Я столкнулся с той же проблемой, которую вы можете решить с помощью CSS следующим образом

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