Question

我有一个Angular项目，其中有一个MatTable来显示用户数据。

但是，每行还具有一个“ detailRow”，仅当单击该行时才会显示以提供其他数据。（expendedElement）

问题在于MatPaginator在进行分页时还考虑了detailRow。示例：

如果我在MatPaginator中选择“ 10”，它将仅按页面显示5行。

由于我不想更改我的dataSource，是否有一种方法可以操纵MatPaginator以使其在我的情况下正常工作？（使他显示的行数是问他的行的两倍）

这是我的（基本）分页器的样子：

<mat-paginator [pageSizeOptions]="[10, 20, 50, 100]"></mat-paginator>

这是我的dataSource：

dataSource: MatTableDataSource<any>; user = new User("name"); dataSource.push(user, { detailRow: true, user });

希望这不要太困惑，在此先感谢您提出的任何想法！

Answer 1

您可以使用类似于下面的代码。

  @ViewChild(MatPaginator) paginator: MatPaginator; 

// In the method you call on (page) use something like
      this.pageIndex = this.paginator.pageIndex// event.pageIndex;

    this.length = this.paginator.length;
    this.pageSize = this.paginator.pageSize * 2;
    var startIndex = this.pageSize * this.pageIndex;
    var endIndex = startIndex + this.pageSize;
    endIndex = (endIndex <= this.length) ? endIndex : this.length;
   /* Make sure you change back the value so that the value displayed is 5 when you have 10 rows displayed*/
    this.pageSize = this.pageSize / 2;

MatPaginator：更改显示属性

1 个答案: