角材料表：检测当前正在显示哪些行（项目）

Question

我需要某种方式来跟踪当前正在显示物料表中的哪些项目（行）。根据文档，<mat-table>它建立在之上<cdk-table>，并为其提供viewChange属性。我的理解是，只要BehaviorSubject显示的行集发生更改，就会触发该事件。例如，总共可能有400行，但是由于分页，屏幕上只有20行。当用户单击以转到下一页时，这应导致viewChange发出。有人知道如何使用此属性吗？我尝试了以下代码，但仅使用value触发一次{ start: 0, end: 1.7976931348623157e+308 }。

component.ts：

allTasks = new MatTableDataSource<Task>([]);

@ViewChild(MatTable) table: MatTable<any>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sorter: MatSort;

ngAfterViewInit() {
  this.allTasks.paginator = this.paginator;
  this.allTasks.sort = this.sorter;
  this.table.viewChange.asObservable().subscribe(val => {
    console.log(`${val.start} - ${val.end}`);
  });
}

component.html：

<mat-table
  matSort
  [dataSource]="this.allTasks"
>
...
</mat-table>

Answer 1

获取显示行的一种方法是使用分页器的订阅并使用 pageIndex 从数据源获取数据。

allTasks = new MatTableDataSource<Task>([]);

@ViewChild(MatTable) table: MatTable<any>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sorter: MatSort;

ngAfterViewInit() {
  this.allTasks.paginator = this.paginator;
  this.allTasks.sort = this.sorter;

  this.allTasks.paginator.page.subscribe((pageEvent: PageEvent) => {
      const startIndex = pageEvent.pageIndex * pageEvent.pageSize;
      const endIndex = startIndex + pageEvent.pageSize;
      const itemsShowed = this.allTasks.filteredData.slice(startIndex, endIndex);
      console.log(itemsShowed);
  });

}

Answer 2

虽然 Daniel 解决方案完美无缺，但我发现了一些更简单的方法。

this.allTasks.connect().value

将为您提供当前页面屏幕上显示的行。

如果您想要所有过滤的行（可能显示在多个页面上），您还可以使用：

this.allTasks.filteredData