仅在当前PageSize上进行Mat-Table选择？

Question

我正在建立一个带有分页的表格，该表格可根据一组选定的复选框来处理一些操作；我有文档，到目前为止只选择了几行中的所有行，一切都很好；

我试图去上班的情景是这样的：如果我PageSize在我的paginator是“10”，我点击masterToggle，选择“所有”行，我想，要选择当前页面上的所有行，仅此而已，因此将是当前显示的10行PageSize，但是，这将选择整个dataSource表，该表大约有300条记录。

有没有一种方法可以masterToggle仅选择基于PageSize的显示行？然后，如果将更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

如果您使用排序、分页和过滤：

HTML 列：

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

成分：

  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}`;
  }

Answer 2

通过删除方法上的最后一行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;
    }
  }