Question

我需要用角材料创建一个全选功能，我在下面共享下面的代码，部分起作用。

tryLogin()

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

全选/取消选择正在起作用，但是单个选择不能正常工作，如果选择了第一个，则它正在选择全选，但是在选择所有个人时它应该起作用，请帮忙。

Answer 1

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

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

这里是demo

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

这是工作demo

的链接

选择所有复选框角材料5 | Gmail样式（如果选择单个），还将选择

3 个答案:

HTML

TS