2
votes

Case à cocher Sélectionner tout Matériau angulaire 5 | Style Gmail si vous sélectionnez un individu, il sélectionnera également

J'ai besoin de créer une sélection de toutes les fonctionnalités dans un matériau angulaire, je partage le code ci-dessous qui fonctionne partiellement.

export class CheckboxConfigurableExample {
    pizzaIng: any;
    selectAll = false;

    constructor() {
        this.pizzaIng = [{
                name: "Pepperoni",
                checked: false
            },
            {
                name: "Sasuage",
                checked: true
            },
            {
                name: "Mushrooms",
                checked: false
            }
        ];
    }


    selectChildren() {

        for (var i = 0; i < this.pizzaIng.length; i++) {
            if (this.pizzaIng[i].checked === true) {
                return this.selectAll = true;
            } else {
                return this.selectAll = false;
            }

        }
    }




    updateCheck() {
        console.log(this.selectAll);
        if (this.selectAll === true) {
            this.pizzaIng.map((pizza) => {
                pizza.checked = true;
            });

        } else {
            this.pizzaIng.map((pizza) => {
                pizza.checked = false;
            });
        }
    }
}

fichier .ts

<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
  <mat-checkbox (change)="selectChildren()"
     [(ngModel)]="ing.checked">
    {{ing.name}}
  </mat-checkbox>
</section>
  <mat-checkbox (change)="updateCheck()"
      class="example-margin"
      [(ngModel)]="selectAll">
    Select All
  </mat-checkbox>

sélectionner tout / désélectionner fonctionne mais la sélection individuelle ne fonctionne pas correctement, si elle est sélectionnée en premier, elle sélectionne tout sélectionner mais cela devrait fonctionner une fois sélectionné tout individu, veuillez aider.

javascript angular angular-material

3 commentaires

updateCheck est-ce pour les cases à cocher individuelles lorsqu'il est coché / décoché manuellement, ce n'est pas la case à cocher parent (selectAll / UnSelectedAll) n'est-ce pas?

la vérification de la mise à jour est pour toutes les cases à cocher sélectionner / désélectionner et sélectionner Les enfants vérifieront chaque sélection individuelle et mettront à jour la sélection tout lorsque tous sont sélectionnés

votre approche est étrange, vous devriez avoir * ngFor sur les enfants uniquement. vous pouvez résoudre le problème mentionné ci-dessus en utilisant $ .grep et vérifier s'il y a des non-cochés en fonction de ce tour d'indicateur selectAll (true / false).

3 Réponses :

2
votes

Modifiez simplement vos selectchildren pour cela, en utilisant chaque vérifiera que toutes les cases sont cochées et cela devrait fonctionner correctement. Vous avez déjà une propriété cochée qui a les valeurs cochées ou non, vous pouvez vérifier si toutes les entrées sont cochées puis vous pouvez activer le selectAll, sinon le désactiver.

  selectChildren() {    
    if (this.pizzaIng.every(a => a.checked)) {
      this.selectAll = true;
    } else {
      this.selectAll = false;
    }
  }

Voici le démo

0 commentaires

1
votes

HTML

import { MatSort, MatTableDataSource } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';

displayedColumns = ['select', 'displayName', 'userEmail'];
dataSource: MatTableDataSource<any>;
selection = new SelectionModel<Element>(true, []);

constructor() {
    this.dataSource = new MatTableDataSource(this.data);
}

public isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
}

public masterToggle() {
    this.isAllSelected() ? this.selection.clear() : this.dataSource.data.forEach(row => this.selection.select(row));
}

TS

Importez les modules suivants dans votre fichier de module: MatTableModule, MatCheckboxModule, MatSelectModule

Vous obtiendrez toutes les entrées sélectionnées dans la variable 'selection'.

<mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
    <mat-header-cell *matHeaderCellDef class="customMatCheckContainer">
        <mat-checkbox (change)="$event ? masterToggle() : null"
                    [checked]="selection.hasValue() && isAllSelected()"
                    [indeterminate]="selection.hasValue() && !isAllSelected()">
        </mat-checkbox>
    </mat-header-cell>
    <mat-cell *matCellDef="let row" class="customMatCheckContainer">
        <mat-checkbox (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)">
        </mat-checkbox>
    </mat-cell>
</ng-container>

<ng-container matColumnDef="displayName">
    <mat-header-cell *matHeaderCellDef> Display Name </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.displayName}} </mat-cell>
</ng-container>

<ng-container matColumnDef="userEmail">
    <mat-header-cell *matHeaderCellDef> Email </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.email}} </mat-cell>
</ng-container>

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)"></mat-row>

0 commentaires

1
votes

Une solution plus courte est dans votre html , pas besoin d'ajouter des conditions if et else

isAllChecked() {
    return this.pizzaIng.every(obj => obj.checked);
  }

  checkAll() {
     this.pizzaIng.forEach(obj => obj.checked = this.selectAll);
  }

dans votre .ts

<section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
  <mat-checkbox
     [(ngModel)]="ing.checked">
    {{ing.name}}
  </mat-checkbox>
</section>
  <mat-checkbox 
      class="example-margin"
      [checked]="isAllChecked()" (change)="checkAll()"
      [(ngModel)]="selectAll">
    Select All
  </mat-checkbox>

voici un lien de travail démo

0 commentaires