如何获取仅在分页的材料数据表页面中显示的数据

Question

我需要将页面上当前显示的数据导出为 excel 或 pdf。那么我怎么能得到只显示在页面上的数据。我将整个数据存储在数据源对象中。例如：- 如果每页的项目是 10 ，我需要 10 项目。如果我将分页器项目列表更改为 20，那么我需要 20 个项目。

组件 HTML

   <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 mat_datatable" matSort matSortActive="total_click" matSortDirection="desc" multiTemplateDataRows matSortDisableClear>

组件.ts

   import {MatPaginator, MatSort, MatTableDataSource} from 
  '@angular/material';

   this.dataSource = new MatTableDataSource(this.reports);
   this.dataSource.paginator = this.paginator;
   this.dataSource.sort = this.sort;    

这是我的组件文件。

Answer 1

如果您不对数据进行排序和过滤，@User3250 的回答很好。如果您的数据经过排序或过滤，它仍然会提取如果没有出现的元素。

this.dataSource.sortData(this.dataSource.filteredData, this.dataSource.sort).filter((u, i) => i >= skip)
    .filter((u: AlerteRow, i: number) => i < this.paginator.pageSize);

将使它在所有情况下都能工作

Answer 2

您可以使用下面的代码跳过一些记录并过滤或获取当前页面记录：

const skip = this.paginator.pageSize * this.paginator.pageIndex;

const pagedData = this.data.filter((u, i) => i >= skip)
   .filter((u, i) => i <this.paginator.pageSize);

在这里创建了一个工作演示：https ://stackblitz.com/edit/angular-n9yojx