mercredi 20 mars 2019

Angular 7 material select all checkbox in datatable not working

Angular material datatable select all doesn't work. When checkbox is selected I'm keeping value in this.endorsementIds array. I'm using isChecked() function to check if value is exist. Can anyone tell where I made mistake. Here is my code:

app.html

<table #dataTable mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

  <!-- Checkbox Column -->
  <ng-container matColumnDef="select">
    <th mat-header-cell *matHeaderCellDef class="checkbox-column">
      <mat-checkbox (change)="masterToggle($event)" [checked]="selection.hasValue() && isAllSelected()" [indeterminate]="selection.hasValue() && !isAllSelected()">
      </mat-checkbox>
    </th>
    <td mat-cell *matCellDef="let row" class="checkbox-column">
      <mat-checkbox [value]="row.settlementEndorsement.endorsementId" (click)="$event.stopPropagation()" (change)="toggle($event, row)" [checked]="isChecked(row)">
      </mat-checkbox>
    </td>
  </ng-container>

  <ng-container matColumnDef="merchantIdentifier">
    <th mat-header-cell *matHeaderCellDef mat-sort-header class="custom-column">
      Dashboard.merchantSettlement.merchantIdentifier
    </th>
    <td mat-cell *matCellDef="let element" class="custom-column">
      
    </td>
  </ng-container>

  <ng-container matColumnDef="settlementDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header class="custom-column">
      Dashboard.merchantSettlement.settleDate
    </th>
    <td mat-cell *matCellDef="let element" class="custom-column">
      
    </td>
  </ng-container>

</table>

app.ts

export class DailyEndorsementComponent implements OnInit {
  dataSource: MatTableDataSource < EndorsementElement > ;
  selection = new SelectionModel < EndorsementElement > (true, []);
  merchantFinanceData: EndorsementResponseInterface;
public endorsementIds: string[] = [];


  toggle(event: MatCheckboxChange, row: EndorsementElement) {
    const endorsementId = row.settlementEndorsement.endorsementId;
    if (event.checked) {
      if (this.endorsementIds.indexOf(endorsementId) === -1) {
        this.endorsementIds.push(endorsementId);
        this.selection.select(endorsementId);
      }
    } else {
      const index = this.endorsementIds.indexOf(endorsementId);
      if (index > -1) {
        this.endorsementIds.splice(index, 1);
        this.selection.deselect(endorsementId);
      }
    }
    this.isAnyCheckboxHasValue();
  }

  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  masterToggle(event: MatCheckboxChange) {
    this.isAllSelected() ?
      this.selection.clear() :
      this.dataSource.data.forEach(row => {
        this.selection.select(row)
      });

    this.endorsementIds = [];
    this.dataSource.data.forEach(row => {
      if (this.selection.isSelected(row)) {
        this.endorsementIds.push(row.settlementEndorsement.endorsementId);
      }
    });
    this.isAnyCheckboxHasValue();
  }

  isChecked(row: EndorsementElement) {
    return this.selection.isSelected(row.settlementEndorsement.endorsementId);
  }


}



Aucun commentaire:

Enregistrer un commentaire