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

Question

我正在构建一个带有分页的表格，该表格根据选定的复选框数组处理一些操作；我有 docs就目前而言，只需单独选择所有行，一切都很好；

我试图开始工作的场景如下:如果我的 paginator 上的 PageSize 是“10”，我点击 masterToggle 选择“所有”行，我希望它选择当前页面上的所有行，仅此而已，所以这将是当前 PageSize 显示的 10 行, 但是，这会选择大约 300 条记录的表的整个 dataSource。

有没有办法让 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}`;
  }