Как добавить выбор всех функций в ng-select в Angular 5

Использование ng-select в Angular 5 ограничивает вас использованием v1.6.3 из ng-select (или ‹ v2.x), но вы можете сделать это с помощью шаблона заголовка ng-select. Я включил приведенный ниже код, но это рабочий Stackblitz Я собрал для примера:

<ng-select [items]="listOfItems"
            bindValue="id"
            bindLabel="name"
            [multiple]="true"
            placeholder="Select City"
            formControlName="example">

  <ng-template ng-header-tmp>

    <div>
      <button class="btn btn-link"
              (click)="onSelectAll()">Select All</button>
      <button class="btn btn-link"
              (click)="onClearAll()">Clear All</button>
    </div>

  </ng-template>

</ng-select>

Затем в вашем контроллере вы должны исправить элемент управления формы с массивом сопоставленных значений, чтобы включить только связанные значения, которые вы указали для ng-select, которые являются значениями ключа bindValue.

public onSelectAll() {
  const selected = this.listOfItems.map(item => item.id);
  this.form.get('example').patchValue(selected);
}

public onClearAll() {
  this.form.get('example').patchValue([]);
}

Если вы не используете реагирующие формы и хотите использовать свойство select all, то #getModelValue="ngModel" внутри тега ngselect в html-файле и в файле *.ts добавьте следующий код:

onSelectAll(select: NgModel, values, array) { 
  const selected = this.dropdownList.datas.map(item => item.id);
  select.update.emit(selected); 
}

deselectAll(select: NgModel) {
     select.update.emit([]); 
}

Используя ng-select множественный выбор с группировкой, вы можете легко добавить выбор всех функций. Вот полный пример -

Демонстрация: https://angular-mkv8vp.stackblitz.io

Код: https://stackblitz.com/edit/angular-mkv8vp?file=src/multi-checkbox-group-example.component.html

Шаг 1- вызовите метод для выбора всей группы с помощью - this.selectAllForDropdownItems(this.people);

Шаг 2 - добавьте selectedAllGroup к каждому элементу этого массива для группировки.

selectAllForDropdownItems(items: any[]) {
    let allSelect = items => {
      items.forEach(element => {
        element['selectedAllGroup'] = 'selectedAllGroup';
      });
    };

    allSelect(items);
  };

3. затем привязать к html

• groupBy="selectedAllGroup" [selectableGroup]="true"