Как выбрать все элементы select2, нажав кнопку? - PullRequest
Новая
       33

Как выбрать все элементы select2, нажав кнопку?

0 голосов
/ 02 июня 2019

Я использую угловой компонент Select2 в качестве множественного селектора. Мне нужна опция, чтобы выбрать все элементы, нажав на кнопку или флажок. https://www.npmjs.com/package/ng-select2

Я попытался вставить в массив [(ngModel)] = "значение" всех идентификаторов элементов при нажатии кнопки, но это не сработало

.HTML-код 

<ng-select2 [data]="exampleData"
            [options]="options"
            [width]="200"
            [(ngModel)]="value"
            (valueChanged)="onTagChanged($event)">
</ng-select2>
<button (click)='selectAll()'>Select all</button>

.TS КОД 

ngOnInit() {
    this.exampleData = [
      {
        id: '0',
        text: 'Pau Cano Dominguez',
      },
      {
        id: '2',
        text: 'Miguel Ángel Vargas Gomez'
      },
      { id: '3',
        text: 'Pedro Medina Cruz'
      },
      { id: '4',
        text: 'Oriol Fuentes Nuñez'
      },
      {
        id: '5',
        text: 'Rayan Mora Sanchez'
      }
    ];
    this.options = {
      width: '200',
      multiple: true,
      tags: false
    };
}
selectAll() {
    console.log('Select All Pushed');
    this.value.push('0');
    this.value.push('1');
    this.value.push('2');
    this.value.push('3');
    this.value.push('4');
}

1 Ответ

0 голосов
/ 02 июня 2019

Компонент ng-select2 использует стратегию обнаружения изменений OnPush.Это означает, что он будет обновляться сам, только когда обнаружит, что его входные данные были обновлены.

Это можно увидеть в коде компонента ng-select2 в строке 31

Теперь массивы передаются по ссылке, поэтому компонент не обнаруживает никаких изменений.Что вам нужно сделать, это передать новый массив.Так что в вашей функции selectAll сделайте это вместо: 

this.value = ['0', '1', '2', '3', '4']; // this passes a new array reference

Чтобы узнать больше об обнаружении изменений , вот хорошее чтение

...