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是进一步处理的值。选择完成后，从此键“Conflict_ID”获取键值。此处无法选择表格中单个选择的所有复选框。我可以取消选中所有复选框。任何人都可以为此提出一些解决方案。

Answer 1

我已经使用select all选项为Angular材质复选框做了一个示例。请参阅Working version in stackblitz。希望它会有所帮助

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

使用角度材质选择角度为5的单选复选框的所有复选框

1 个答案: