“全选”复选框 角度材质 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 文件

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

只需将您的选择子项更改为此，使用每个将选中所有复选框，它应该可以正常工作。您已经有一个选中的属性，该属性的值是否为选中，您可以检查是否选中了所有条目，然后启用 selectAll，否则禁用它。

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

这是演示

Answer 2

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

您将在"选择"变量中获得所有选定的条目。

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 3

更简短的解决方案在您的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 4

对于数据源中的 gmail 样式选择，您可以将整个数据源划分为特定大小的区块。

pageIndex: any = 0;
selectedData: any;
resultArray: any = [];
const result = this.dataSource.data.reduce(
      (resultArray: any, item, index) => {
        const chunkIndex = Math.floor(index / this.pageSize);
        if (!resultArray[chunkIndex]) {
          resultArray[chunkIndex] = []; // start a new chunk
        }
        resultArray[chunkIndex].push(item);
        return resultArray;
      },
      []
    );
this.resultArray = result;

这是演示https://stackblitz.com/edit/angular-jnykdu?file=README.md