wake-up-neo.com

Wählen Sie die Option Alle Matten und deaktivieren Sie Alle

Ich habe das folgende Szenario:

(enter image description here

Ich möchte erreichen ist:

  1. Wenn der Benutzer auf Alle klickt, werden alle Optionen ausgewählt, und wenn der Benutzer auf Alle wieder werden dann alle Optionen abgewählt.
  2. Wenn die Option All aktiviert ist und der Benutzer auf ein anderes Kontrollkästchen als All klickt, wird All und angeklicktes Kontrollkästchen werden deaktiviert.
  3. Wenn der Benutzer nacheinander 4 Optionen auswählt, werden Alle ausgewählt.

HTML-Datei

<mat-select placeholder="User Type" formControlName="UserType" multiple>
    <mat-option *ngFor="let filters of userTypeFilters" [value]="filters.key">
          {{filters.value}}
    </mat-option>
        <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
</mat-select>

TS-Datei

this.searchUserForm = this.fb.group({
  userType: new FormControl('')
});

userTypeFilters = [
  {
    key: 1, value: 'Value 1',
  },
  {
    key: 2, value: 'Value 2',
  },
  {
    key: 3, value: 'Value 3',
  },
  {
    key: 4, value: 'Value 4',
  }
]

toggleAllSelection() {
  if (this.allSelected.selected) {
    this.searchUserForm.controls.userType
    .patchValue([...this.userTypeFilters.map(item => item.key), 0]);
  } else {
    this.searchUserForm.controls.userType.patchValue([]);
  }
}

Nun, wie man 2. und 3. Punkt erreicht

Stackblitz ist: https://stackblitz.com/edit/angular-material-with-angular-v5-znfehg?file=app/app.component.html

angular-material2angular6multi-select
10
Gags

Verwenden Sie den folgenden Code, um eine Funktion zu erstellen, indem Sie auf jede Option mat-option Und select()/deselect() all klicken:

Siehe stackblitz: https://stackblitz.com/edit/angular-material-with-angular-v5-jsgvx6?file=app/app.component.html

TS: 

tosslePerOne(all){ 
   if (this.allSelected.selected) {  
    this.allSelected.deselect();
    return false;
}
  if(this.searchUserForm.controls.userType.value.length==this.userTypeFilters.length)
    this.allSelected.select();

}
  toggleAllSelection() {
    if (this.allSelected.selected) {
      this.searchUserForm.controls.userType
        .patchValue([...this.userTypeFilters.map(item => item.key), 0]);
    } else {
      this.searchUserForm.controls.userType.patchValue([]);
    }
  }

HTML: 

<form [formGroup]="searchUserForm" fxFlex fxLayout="column" autocomplete="off" style="margin: 30px">
    <mat-select placeholder="User Type" formControlName="userType" multiple>
        <mat-option *ngFor="let filters of userTypeFilters" [value]="filters.key" (click)="tosslePerOne(allSelected.viewValue)">
            {{filters.value}}
        </mat-option>
        <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">All</mat-option>
    </mat-select>
</form>
17
לבני מלכה

Eine andere Möglichkeit, dies zu tun, ist die Auswahl @ ViewChild, um die Mattenauswahlkomponente abzurufen und die ausgewählten oder nicht ausgewählten Mattenoptionselemente zu verschieben. Wir benötigen auch eine Variable, um den ausgewählten tatsächlichen Status zu speichern und alle Elemente bei jedem Klick auszuwählen oder die Auswahl aufzuheben. Hoffnung wird helfen.

  import {MatOption, MatSelect} from "@angular/material";
  
  export class ExampleAllSelector {
  
    myFormControl = new FormControl();
    elements: any[] = [];

    allSelected = false;

    @ViewChild('mySel') skillSel: MatSelect;

    constructor() {}

    toggleAllSelection() {
      this.allSelected = !this.allSelected;  // to control select-unselect
      
      if (this.skillAllSelected) {
        this.skillSel.options.forEach( (item : MatOption) => item.select());
      } else {
        this.skillSel.options.forEach( (item : MatOption) => {item.deselect()});
      }
      this.skillSel.close();
    }
  }
      <mat-select #mySel placeholder="Example" [formControl]="myFormControl" multiple>
        <mat-option [value]="0" (click)="toggleAllSelection()">All items</mat-option>
        <mat-option *ngFor="let element of elements" [value]="element">{{skill.name}}</mat-option>
      </mat-select>
7
Marc