Angular Material 表 : Detect what rows (items) are currently being displayed

Question

我需要一些方法来跟踪 Material 表中当前正在显示的项目(行)。根据documentation , <mat-table>建立在 <cdk-table> 之上, 给它一个 viewChange属性(property)。我的理解是这个 BehaviorSubject每当显示的行集发生变化时触发。例如，可能总共有 400 行，但由于分页，屏幕上只有 20 行。当用户点击进入下一页时，这应该会导致 viewChange发射。有谁知道如何使用这个属性？我尝试了以下代码，但它只触发一次，值为 { start: 0, end: 1.7976931348623157e+308 } .

组件.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}`);
  });
}

组件.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);
  });

}