Блог

Я использую «Выбрать все» в своем списке выбора, чтобы очистить любые другие выбранные параметры и выбрать ТОЛЬКО опцию «Все». Я могу удалить все выбранные параметры, но я не могу выбрать опцию «Все».

 <mat-form-field class="example-full-width">
   <mat-label>Select Program(s)</mat-label>
   <mat-select #myprograms  [formControl]="myprgrmFormControl" multiple [(ngModel)]="criteria.Program_ID" >
       <mat-option (click)="toggleAllSelection()" value="ALL" >All</mat-option>
       <mat-option *ngFor="let row of ProgramDropdown"  [value]="row.Program_ID" >
            {{row.Program_Name}} </mat-option>
   </mat-select>
</mat-form-field>
 

В моем файле ts:

 import { MatSelect } from '@angular/material/select';
import { MatOption } from '@angular/material/core';

myprgrmFormControl = new FormControl();
allSelected = false;
@ViewChild('myprograms') ProgSel: MatSelect;

toggleAllSelection() {
    this.allSelected = !this.allSelected;  // to control select-unselect    
    if (this.allSelected) {
       this.ProgSel.options.forEach( (item : MatOption) => item.deselect());
       //I changed the above from a select to a deselect since there are too many items in the list. 
       //The idea is that I clear all of the values, select "All" and will pass that value around
      in my code.
     } else {
       this.ProgSel.options.forEach( (item : MatOption) => {item.deselect()});
     }
}
 

Как выбрать опцию «Все» в файле ts?

Несколько шагов для достижения этой цели:

1. Поскольку вы используете объекты в качестве своих mat-option , используйте compareWith функцию в своем mat-select , обновленном [(ngModel)] и mat-option [value] привязанном к объектному уровню.
2. Определите allOption структуру, которая будет правильно оценена вашей новой compareWith функцией.
3. Программно setValue() перейти myprgrmFormControl к массиву с новым allOption . Обновите свою value привязку: [value]="allOption"

HTML:

 <mat-form-field class="example-full-width">
   <mat-label>Select Program(s)</mat-label>
   <mat-select #myprograms  [formControl]="myprgrmFormControl" multiple [(ngModel)]="criteria" [compareWith]="selectCompare">
       <mat-option (click)="toggleAllSelection()" [value]="allOption" >All</mat-option>
       <mat-option *ngFor="let row of ProgramDropdown"  [value]="row" >
            {{row.Program_Name}} </mat-option>
   </mat-select>
</mat-form-field>
 

тс:

   allOption = { Program_ID: 'ALL', Program_Name: 'ALL' };

  toggleAllSelection() {
    this.allSelected = !this.allSelected; // to control select-unselect
    if (this.allSelected) {
      this.ProgSel.options.forEach((item: MatOption) => item.deselect());
      this.myprgrmFormControl.setValue([this.allOption]);
    } else {
      this.ProgSel.options.forEach((item: MatOption) => {
        item.deselect();
      });
    }
  }

  selectCompare(item1: SelectType, item2: SelectType) {
    return item1.Program_ID === item2.Program_ID;
  }
 

https://stackblitz.com/edit/angular-tqu7nc?file=src/app/select-multiple-example.html