angular - Mat-Table-utvalg kun på gjeldende side størrelse?

Jeg lager en tabell med paginering som håndterer noen handlinger basert på en matrise av valgte avkrysningsbokser; jeg har dokumentasjonen, og så langt som bare å velge ALLE rader eller bare noen individuelt, er alt bra;

Scenarioet jeg prøver å få til å fungere er følgende: Hvis min PageSize på min paginator er "10", og jeg klikker på masterToggle for å velge "alle" rader, ønsker jeg at det skal velge alle radene på gjeldende side, ikke mer, så det ville være de 10 radene som vises med gjeldende PageSize, men dette velger hele dataSource til tabellen som er rundt 300 poster.

Finnes det en måte å få masterToggle til å velge kun radene som vises basert på PageSize? Hvis jeg deretter endrer PageSize til 20, vil bare de første 10 forbli valgt.

Dette er koden min.

/** Whether the number of selected elements matches the total number of rows. */
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
  }

Svar #1

Hvis du bruker sortering, paginering og filtrering:

HTML-kolonne:

<mat-checkbox (change)="$event ? masterToggle($event) : null"
    [checked]="selection.hasValue() && isEntirePageSelected()"
    [indeterminate]="selection.hasValue() && !isEntirePageSelected()"
    [aria-label]="checkboxLabel()"></mat-checkbox>

Komponent:

  getPageData() {
    return this.dataSource._pageData(this.dataSource._orderData(this.dataSource.filteredData));
  }

  isEntirePageSelected() {
    return this.getPageData().every((row) => this.selection.isSelected(row));
  }

  masterToggle(checkboxChange: MatCheckboxChange) {
    this.isEntirePageSelected() ?
      this.selection.deselect(...this.getPageData()) :
      this.selection.select(...this.getPageData());
  }

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

Svar #2

Fikk det til å fungere ved å fjerne den siste linjen i masterToggle()-metoden, og erstatte den med en egendefinert funksjon som går gjennom PageSize til paginatoren og kaller select-metoden til SelectionModel for hver varsling den finner; jeg endret også isAllSelected-metoden til å sammenligne PageSize og den valgte lengden i stedet for hele dataSource.

/** Whether the number of selected elements matches the total number of rows. */
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const page = this.dataSource.paginator.pageSize;
    return numSelected === page;
  }

  /** Selects all rows if they are not all selected; otherwise clear selection. */
  masterToggle() {
    this.isAllSelected() ? 
    this.selection.clear() : this.selectRows();
  }

  selectRows() {
    for (let index = 0; index < this.dataSource.paginator.pageSize; index++) {
      this.selection.select(this.dataSource.data[index]);
      this.selectionAmount = this.selection.selected.length;
    }
  }

Relaterte artikler