mardi 5 mai 2020

How do I solve my multiselection for checkbos list problem?

I'm really new with angular and I'm trying to get data from a table through checkboxes, but it only works when I click the "Select all" header. If I want to multiselect them manually it does not work . This is my .html code for my selector column.

<ng-container matColumnDef="select">


<th mat-header-cell *matHeaderCellDef> Select all
  <mat-checkbox (change)="$event ? masterToggle() : null"
                [checked]="selection.hasValue() && isAllSelected() "
                [indeterminate]="selection.hasValue() && !isAllSelected()"                  
                [aria-label]="checkboxLabel()">
  </mat-checkbox>
</th>    
<td mat-cell *matCellDef="let row">
  <mat-checkbox (click)="$event.stopPropagation() "
                (change)="$event ? selection.toggle(row) : null"
                [checked]="selection.isSelected(row) "
                [aria-label]="checkboxLabel()"> 
  </mat-checkbox>
</td>

And this is my .ts file

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

  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.projectEntity.images.forEach(row => this.selection.select(row));
        //console.log(this.imagesPlusChecked)
        console.log(this.selection.selected)
  }

  checkboxLabel(row?: any): string {
    if (!row) {
      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
    }
    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
  }

In this.selection.selected it shloud appear all my selected data. Thank you very much and sorry if this problem was already solved but I couldn't find anything.




Aucun commentaire:

Enregistrer un commentaire