Выбор таблицы матов только на текущем PageSize?

Question

Я строю таблицу с разбиением на страницы, которая обрабатывает некоторые действия на основе массива выбранных флажков;У меня есть документы и, что касается всего лишь выбора ВСЕХ строк всего по несколько штук, все хорошо;

Сценарий, к которому я пытаюсь приступить, заключается в следующем: Если мойPageSize на моем paginator равно «10», и я нажимаю masterToggle, чтобы выбрать «все» строки, я хочу, чтобы все строки на текущей странице были выбраны, не более того, чтобы было 10 строккоторые отображаются с текущим значением PageSize, однако при этом выбирается вся dataSource таблицы, которая составляет около 300 записей.

Есть ли способ заставить masterToggle выбирать только те строки, которыеотображаются в зависимости от размера страницы?Затем, если я изменю PageSize на 20, останутся выбранными только первые 10.

Это мой код.

/** 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));
  }

Answer 1

Мое решение основано на отображаемых в данный момент строках, поэтому оно работает в отношении нумерации страниц.В этом многое можно улучшить, поэтому, пожалуйста, не стесняйтесь делать его лучше.

  isAllSelected() {

    const numSelected = this.selection.selected.length;
    const displayedRows = this.filteredEvents.connect().value.length;
    let isAllSelected = (numSelected === displayedRows);

    if (isAllSelected) {
      isAllSelected = this.isAllDisplayedSelected();
    }

    return isAllSelected;
  }

  isAllDisplayedSelected() {
    let isAllDisplayedSelected = true;

    if (this.selection.selected.length === 0) {
      return this.isAllSelected();
    }

    this.filteredEvents.connect().value.some(element => {
      if (!this.selection.isSelected(element)) {
        isAllDisplayedSelected = false;
        return isAllDisplayedSelected;
      }
    });
    return isAllDisplayedSelected;
  }

  masterToggle() {
    this.isViewableSelected() ?
      this.deselectRows() :
      this.selectRows();
  }

  isViewableSelected() {
    return (this.isAllSelected() || this.isAllDisplayedSelected());
  }

  deselectRows() {
    const itemsToBeUnselected = this.filteredEvents.connect().value;
    itemsToBeUnselected.forEach(element => {
      this.selection.deselect(element);
    });
  }

  selectRows() {
    const currentlyDisplayedRows = this.filteredEvents.connect().value;

    for (let index = 0; index < currentlyDisplayedRows.length; index++) {
      this.selection.select(currentlyDisplayedRows[index]);
      this.selectionAmount = this.selection.selected.length;
    }
  }

HTML:

<ng-container matColumnDef="select">
  <th mat-header-cell *matHeaderCellDef>
    <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isViewableSelected()"
      [indeterminate]="selection.hasValue() && !isViewableSelected()">
    </mat-checkbox>
  </th>
  <td mat-cell *matCellDef="let row">
    <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
      [checked]="selection.isSelected(row)">
    </mat-checkbox>
  </td>
</ng-container>

Answer 2

Вот мое решение.https://angular -vkz1dp.stackblitz.io Я добавляю дополнительную страницу, если страница переключения не снимается.

Столбец HTML:

<mat-checkbox #ref
       (click)="$event.stopPropagation()"
       (change)="$event ? masterToggle(ref) : null"></mat-checkbox>

Ячейка HTML:

<mat-checkbox (click)="$event.stopPropagation()"
                    [checked]="selection.isSelected(element)"></mat-checkbox>

HTML-пагинатор:

<mat-paginator fixed [pageSizeOptions]="[20, 50, 100]" [pageSize]="20" (page)="pageChange()" showFirstLastButtons></mat-paginator>

Компонент:

  @ViewChild('ref') ref: any;

  masterToggle(_ref: any) {
    if(_ref.checked){
        this.checkPageOnly();
    }
    else {
        this.selection.clear();
    }
  }

  checkPageOnly() {
      let i = this.dataSource.paginator.pageIndex * this.dataSource.paginator.pageSize;
      let end = (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize;
      for(i; i < end; i++) {
        this.selection.select(this.dataSource.data[i]);
      }
  }

    pageChange() {
        this.ref.checked = false;
        this.masterToggle(this.ref);
    }
}

Answer 3

удалось заставить его работать, удалив последнюю строку в методе masterToggle() и заменив ее пользовательской функцией, которая перебирает PageSize страницы-указателя и вызывает метод select для SelectionModel длякаждое обнаруженное предупреждение;Я также изменил метод isAllSelected для сравнения PageSize и выбранного lenght вместо целого 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;
    }
  }