使用角度材料在angular5中选择所有复选框，单选复选框

Question

我用 HTML 编写了这样的代码：

<table class="table tableWidths shadowTable">
      <thead>
        <tr class="tableHeaderBgColor">
          <th>
            <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()">
            </mat-checkbox>
          </th>
          <th>Status</th>
          <th>Conflict ID</th>
          <th>Conflict Party</th>
          <th>Conflict Party ID</th>
          <th>Account Name</th>
          <th>Account Owner Name</th>
          <th>Account Owner ID</th>
          <th>Edit</th>
        </tr>
      </thead>
      <tbody>
        <ng-container *ngFor="let conf of conflicts;let ns=index;let odd=odd;">
          <tr [class.tableOdd]="odd">
            <td>
              <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(conf) : null" [checked]="selection.isSelected(conf)">
              </mat-checkbox>
            </td>
            <td>{{conf.Status}}</td>
            <td>
              {{conf.Conflict_ID}}
            </td>
            <td>{{conf.Conflict_Party}}</td>
            <td>{{conf.Conflict_Party_ID}}</td>
            <td>{{conf.Account_Name}}</td>
            <td>{{conf.Account_Owner_Name}}</td>
            <td>{{conf.Account_Owner_ID}}</td>
            <td>
              <mat-icon>edit</mat-icon>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </table>

在.ts文件中的代码是这样写的：

conflicts = [
    {
      Status: 'Pending',
      Conflict_ID: 203888400,
      Conflict_Party: 'Collier County Pulish',
      Conflict_Party_ID: 12345,
      Account_Name: 'Asian Group LD',
      Account_Owner_Name: 'Mike',
      Account_Owner_ID: 12345, checked: false
    },
    {
      Status: 'Approved',
      Conflict_ID: 203888400,
      Conflict_Party: 'Collier County Pulish',
      Conflict_Party_ID: 12345,
      Account_Name: 'Asian Group LD',
      Account_Owner_Name: 'Mary',
      Account_Owner_ID: 12345, checked: false
    }
  ]    
isAllSelected() {
        const numSelected = this.selection.selected.length;
        const numRows = this.conflicts.length;
        return numSelected === numRows;
      }

      masterToggle() {
        this.isAllSelected() ?
          this.selection.clear() :
          this.conflicts.forEach(row => this.selection.select());
      }
      isSelected(item) {
        console.log('item ' + JSON.stringify(item));
      }

在我的数组中，冲突 ID 是获得进一步处理的值。 Whenever selection done get the key value from this key 'Conflict_ID'. 这里无法在表中的单选中选择所有复选框。 我可以取消选择所有复选框。 任何人都可以为此提出一些解决方案。

Answer 1

我已经为 Angular 材质复选框制作了一个示例，其中包含全选选项。请参阅Working version in stackblitz。希望对你有帮助

组件.ts

import {Component} from '@angular/core';

/**
 * @title Configurable checkbox
 */
@Component({
  selector: 'checkbox-configurable-example',
  templateUrl: 'checkbox-configurable-example.html',
  styleUrls: ['checkbox-configurable-example.css'],
})
export class CheckboxConfigurableExample {
  pizzaIng : any;
  selectAll = false;

  constructor(){
    this.pizzaIng=[
      {name : "Pepperoni", checked : false},
      {name : "Sasuage", checked : true},
      {name : "Mushrooms", checked : 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;
      });
    }
  }
}

HTML 文件

<mat-card class="result">
  <mat-card-content>
    <h2 class="example-h2">Sample</h2>

    <section *ngFor="let ing of pizzaIng; let i = index" class="example-section">
      <mat-checkbox
         [(ngModel)]="ing.checked">
        {{ing.name}}
      </mat-checkbox>
    </section>
  </mat-card-content>
</mat-card>


<mat-card class="result">
  <mat-card-content>
    <h2 class="example-h2">Select / Deselect</h2>

    <section class="example-section">
      <mat-checkbox (change)="updateCheck()"
          class="example-margin"
          [(ngModel)]="selectAll">
        Select All
      </mat-checkbox>
    </section>
  </mat-card-content>
</mat-card>