Question

您好我正在尝试实施找到的代码here, for handling checkboxes, that can be used for bulk actions in a datagrid

问题是我使用自定义数据源来处理我的分页和过滤

我知道数据被推送到selectionModel类的一个实例，并且可以在准备好时从中检索信息吗？

这些是功能：

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

我遇到了这些问题：

const numRows = this.dataSource.data.length;

this.dataSource.data.forEach(row => this.selection.select(row));

基本上，数据服务上不存在数据

我的服务采用过滤，排序，返回项目数，页码

的对象

this.dataSource.loadUsers(this.obj);

this.obj =
      {
        Page: this.paginator.pageIndex,
        NumberOfItems: this.paginator.pageSize,
        Filters: [ {} ],
        Sorting: {
          Property: this.sort.active,
          Direction: sortDirection
        }
  }

链接的代码也是选择所有项目，我想要一些只能选择可以看到的项目的东西，如果你正在寻呼你不想在下一页上选择项目< / p>

有没有人有任何想法？

由于

Answer 1

万一其他人遇到这个问题，这就是我处理它的方式：

我的自定义数据服务中已有一个公共行为主题，每次从主题发出的api请求数据，我的应用程序的其他信息，（分页信息）我把另一个属性放在该主题中，数组用户

this.pagedInfoSubject.next({ pageNumber: pageNumber, totalItems: totalItems, users:users });

在我的ts文件中，我订阅了这个observable：

let conn = this.dataSource.pagedInfoSubject
      .skip(1)
      .subscribe((data) => {
        this.selection.clear();
        this.totalItems = data.totalItems;
        this.usersData = data.users//array of users
        console.log(this.usersData)
      });

并将复选框的代码更新为：

isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.usersData.length;
    return numSelected === numRows;
  }

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

基本上使用为循环传回的数组

如果有人能看到更好的方式，或者需要我详细说明，请告诉我

Answer 2

更简单的解决方案：

以防万一有人仍在为上述解决方案而苦苦挣扎。变量“data”在您的 customDataSource 中不存在，但应该有一个 BehaviorSubject public userSubject = new BehaviorSubject<User[]>([]) 来保存 dataTable 的数据（在我的例子中是用户列表）。您可以通过this.datasource.userSubject.getValue()访问数据，从而使用.length();

获得页面中实际数据的长度

我更改了以下几行：

const numRows = this.dataSource.data.length;

this.dataSource.data.forEach(row => this.selection.select(row));

到：

const numRows = this.dataSource.userSubject.getValue().length;

this.dataSource.userSubject.getValue().forEach(row => this.selection.select(row));

具有自定义数据源

2 个答案: