Выбрать все флажок Угловой материал 5 | Стиль Gmail, если выбрать индивидуальный, он также будет выбирать

Question

Мне нужно создать все выбранные функции в угловом материале, ниже я делюсь кодом, который частично работает.

<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>

.ts file

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;
            });
        }
    }
}  

выбрать все / отменить выбор работает, но индивидуальный выбор не работает должным образом, если выбран первый, он выбирает выбрать все, но он должен работать, когда выбран весь человек, Пожалуйста, помогите.

Answer 1

HTML

<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>

TS

Импортируйте следующие модули в файл модуля: MatTableModule, MatCheckboxModule, MatSelectModule

Вы получите все выбранные записи в переменной 'selection'.

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));
}

Answer 2

более короткое решение в вашем html, нет необходимости добавлять if и else условия

<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>

в молодых .ts

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

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

вот ссылка рабочего демо

Answer 3

Просто измените ваши selectchildren на это, используя каждые проверит все флажки, и он должен работать нормально. У вас уже есть свойство флажка, значения которого отмечены как проверенные или нет, вы можете проверить, проверены ли все записи, а затем включить функцию selectAll, иначе отключить ее.

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

Вот демоверсия