为 Angular Material 表选择每页的所有当前页面

Question

是否可以为角度材料表的每一页选择全部。我已经设置了第一页可以选择所有当前显示的项目，即 10。

我还有几页数据，如果我转到下一页，则选中了全选复选框，但我不知道如果选中复选框，如何在每页顶部添加一个复选框。

例如，期望的结果：首先，我在当前第一个页面上全选（选择 10）我转到使用 mat 分页的下一页，并且不应该选中全选复选框，如果我全选在此页面上，这 10 个将被选中，共 20 个选中的行。

Answer 1

我们必须修改isAllSelected、masterToggle 的实现，并引入新方法selectRows 以及选择当前页面行的逻辑。

所以在 selectRows() 方法中，我们必须将获取起始索引和结束索引的逻辑放在我们必须根据当前页面索引和数据源长度的大小选择当前页面上的数据时。

请找到我在项目中实现的代码逻辑。

    /** 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;
        let endIndex: number;
        // First check whether data source length is greater than current page index multiply by page size.
        // If yes then endIdex will be current page index multiply by page size.
        // If not then select the remaining elements in current page only.
        if (this.dataSource.data.length > (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize) {
          endIndex = (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize;
        } else {
          // tslint:disable-next-line:max-line-length
          endIndex = this.dataSource.data.length - (this.dataSource.paginator.pageIndex * this.dataSource.paginator.pageSize);
        }
        return numSelected === endIndex;
      }

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

      selectRows() {
        // tslint:disable-next-line:max-line-length
        let endIndex: number;
        // tslint:disable-next-line:max-line-length
        if (this.dataSource.data.length > (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize) {
          endIndex = (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize;
        } else {
          // tslint:disable-next-line:max-line-length
          endIndex = this.dataSource.data.length;
        }
        
        for (let index = (this.dataSource.paginator.pageIndex * this.dataSource.paginator.pageSize); index < endIndex; index++) {
          this.selection.select(this.dataSource.data[index]);
        }
      }

Answer 2

对于这个例子https://stackblitz.com/edit/angular-mat-table-checkbox-select-all-kolml5?file=app%2Ftable-selection-example.html

我刚刚为 .html 添加了这个

    <mat-checkbox (change)="$event ? selectRows() : null"
    [checked]="selection.hasValue() && isSelectedPage()"
    [indeterminate]="selection.hasValue() && !isSelectedPage()"
    >all in this page</mat-checkbox>

对于 .ts : 有两个函数需要添加

     selectRows() {
        let endIndex: number;
          if (this.isSelectedPage() ) {
            this.selection.clear(); 
          } else {
    if (this.dataSource.data.length > (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize) {
          endIndex = (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize;
        } else {
          endIndex = this.dataSource.data.length;
        }
        for (let index = (this.dataSource.paginator.pageIndex * this.dataSource.paginator.pageSize); index < endIndex; index++) {
          this.selection.select(this.dataSource.data[index]);
        }
          }
      }

     isSelectedPage() {
        const numSelected = this.selection.selected.length;
        const page = this.dataSource.paginator.pageSize;
        let endIndex: number;
        if (this.dataSource.data.length > (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize) {
          endIndex = (this.dataSource.paginator.pageIndex + 1) * this.dataSource.paginator.pageSize;
        } else {
          endIndex = this.dataSource.data.length - (this.dataSource.paginator.pageIndex * this.dataSource.paginator.pageSize);
        }
      
        return numSelected === endIndex;
      }