Добавить кнопку выбора всех в mat-select с mat-optgroup

Question

Я хочу добавить кнопку «выбрать все» и «отменить выбор всех» для разделения выбора матов по группам.

Мой код доступен здесь: https://stackblitz.com/edit/angular5-selectall-with-groups?file=app/select-reset-example.html

Этот код основан на этой рабочей демонстрации для простого выбора мата: https://stackblitz.com/edit/angular-material-select-multi-c6vtux?file=app%2Fapp.component.ts

В моем коде мне нужночтобы зациклить 4 массива, поэтому я начал тестировать функцию «selectAll ()» для первого массива.Однако, только первый флажок установлен, даже если [ngModel] показывает, что функция принимает все значения внутри массива.Мне также нужно, чтобы эта функция работала для остальных трех массивов.

Я надеюсь, что кто-то может помочь мне решить проблему.Я также могу изменить код, если есть лучший способ сделать то, что я пытаюсь достичь.

Answer 1

Вам необходимо сделать следующее:

1. Удалить ненужные [(ngModel)] (у вас есть два) и [compareWith] из <mat-select>:

<mat-select placeholder="State2" multiple [(ngModel)]="modelGroup" #itemSelect="ngModel">...</mat-select>

Вместо создания массива для каждой группы параметров с регулярным выражением вы можете создать один отдельный массив с именем groups, который будет выглядеть следующим образом:

groups: any[] = [
    {
      name: 'ETHERNET',
      items: [
        {
          label: "640K",
          value: "BS640KB_ETHERNET",
          defaultValue: true
        },
        {
          label: "7MB",
          value: "BS7MB_ETHERNET",
          defaultValue: true
        },
        {
          label: "7MB NOQinQ",
          value: "BS7MB_ETHERNET_NOQinQ",
          defaultValue: true
        },
        {
          label: "20MB",
          value: "BS20MB_ETHERNET",
          defaultValue: true
        }
      ]
    },
    {
      name: 'ATM',
      items: [
        {
          label: "640K",
          value: "BS640K_ATM",
          defaultValue: true
        },
        {
          label: "7MB",
          value: "BS7M_ATM",
          defaultValue: true
        },
        {
          label: "20MB",
          value: "BS20M_ATM",
          defaultValue: true
        }
      ]
    },
    {
      name: 'ETH',
      items: [
        {
          label: "2MB",
          value: "BS2MB_SHDSL_ETH",
          defaultValue: true
        },
        {
          label: "4MB IMA",
          value: "BS4MB_SHDSL_ETH_IMA",
          defaultValue: true
        },
        {
          label: "6MB IMA",
          value: "BS6MB_SHDSL_ETH_IMA",
          defaultValue: true
        },
        {
          label: "8MB IMA",
          value: "BS8MB_SHDSL_ETH_IMA",
          defaultValue: true
        }
      ]
    },
    {
      name: 'SHDSL ATM',
      items: [
        {
          label: "2MB",
          value: "BS2MB_SHDSL",
          defaultValue: true
        },
        {
          label: "4MB B",
          value: "BS4MB_SHDSL_B",
          defaultValue: true
        },
        {
          label: "4MB IMA",
          value: "BS4MB_SHDSL_IMA",
          defaultValue: true
        },
        {
          label: "6MB IMA",
          value: "BS6MB_SHDSL_IMA",
          defaultValue: true
        },
        {
          label: "8MB IMA",
          value: "BS8MB_SHDSL_IMA",
          defaultValue: true
        }
      ]
    }
  ];

Более того, вы можете удалите все другие массивы, регулярные выражения, ваш метод createCatArray() и equals().

Теперь мы можем очистить шаблон.Продолжайте и удалите все существующие <mat-optgroup>.Теперь добавьте один <mat-optgroup>, который проходит через массив настроек groups и отображает соответствующие элементы, как показано ниже:

<mat-optgroup *ngFor="let group of groups" [label]="group.name">
   <mat-option *ngFor="let item of group.items" [value]="item.value">
      {{item.label}}
   </mat-option>
</mat-optgroup>

Удалите параметр, который вы установили с помощью кнопки Выбрать все:

<button mat-button (click)="selectAll(itemSelect)">Seleziona Tutti</button>

Теперь последний шаг - изменить метод selectAll().В методе удалите массив параметров и существующий цикл for.Теперь мы собираемся перебрать массив установленных групп и добавить значение каждого элемента в каждой группе в массив значений.Этот массив будет позже отправлен для обновления выбранных значений.Метод должен выглядеть следующим образом:

selectAll(select: NgModel) {
  let values: any[] = [];

  for(let group of this.groups){
    for(let item of group.items){
      values.push(item.value);
    }
  }

  select.update.emit(values);
}

В основном мы сделали следующее:

1. Создали массив групп, который дополнительно содержит имяgroup и элементы, принадлежащие группе.

2. Перебирайте массив групп для отображения групп и соответствующих им элементов в html-шаблоне.

3. Добавлен метод select all, который проходит по всем элементам групп и добавляет их значение в массив, который будет представлен позже для обновления выбора.

Вот работающее приложение:

https://stackblitz.com/edit/angular5-selectall-with-groups-knptuu

Answer 2

* Я также обновляю ваш код, пожалуйста * https://stackblitz.com/edit/angular5-selectall-with-groups?file=app%2Fselect-reset-example.ts

HTML-код похож на это

 <form [formGroup]="roleForm " (ngSubmit)="onSubmit(roleForm .value)">

     <!-- Multi Select Mat Start -->
              <mat-form-field class="example-full-width">

                <mat-select placeholder="Select Privileges"  #selectedValues  class="filter-select" formControlName="privilegeMultiselect" 
                  multiple required >
                  <mat-option disabled="disabled" class="filter-option">
                    <button mat-raised-button class="mat-primary fill text-sm" (click)="selectAll(dropdownList)">
                      Select All 
                    </button>
                    <button  mat-raised-button class="mat-primary fill text-sm eta-margin-all" (click)="deselectAll()">
                      Deselect All
                    </button>
                  </mat-option>
                  <mat-option *ngFor="let privilege of dropdownList" [value]="privilege.id">{{privilege.itemName}}</mat-option>
                </mat-select>

              </mat-form-field>
              <!-- Multi select mat end -->

    </form>

Создание конструктора форм в методе ngoninit

this.roleForm = this._formBuilder.group({
      privilegeMultiselect: []

    })

Это ваш метод выбора значения

selectAll(list) {

    this.roleForm.get('privilegeMultiselect').patchValue(list)
  }
  deselectAll() {
    this.roleForm.get('privilegeMultiselect').patchValue([])
  }