如何设置角度材料分页器的长度属性

Question

这就是我的

mat-paginator

的样子：

<mat-paginator [pageSizeOptions]="pageSizeOptions" [length]="100"></mat-paginator>

基本上，我正在尝试实现一个典型的分页想法：服务器不会返回所有数据，而是返回其中的一部分，然后当打开新页面时，它会获取另一部分数据。为了做到这一点，我需要让分页器知道数据库中有多少项，也就是说，我需要为其提供

length

属性。

我尝试以多种方式设置它，直接在上面的行中或在我发出 get 请求的方法内部。像这样：

this.paginator.length = 100;

确实，长度应该来自服务器，但目前出于调试目的，我只是将其硬编码。

    this.dataSourceService.findAll().subscribe(
      records => {
        this.paginator.length = 100;

        this.dataSource.data = records.map(
          record => new Record().deserialize(record)
        )
      }
    )

我在客户端上获得的长度值仍然等于我在服务器响应中获得的数组中包含的项目数。

我做错了什么以及为什么长度值没有设置为 100。

编辑：

好吧，这是一些更相关的代码。

在组件内部我执行以下操作：

dataSource = new MatTableDataSource<Record>();
pageSizeOptions: number[] = [5, 10, 20];

在

OnInit()

里面我也有以下行：

this.dataSource.paginator = this.paginator;

Answer 1

对于其他遇到和我同样问题的人：

如果您将

dataSource

连接到

paginator

，它将覆盖您设置的任何值。

删除这个：

this.dataSource.paginator = this.paginator;

Answer 2

我就是这样用的

<mat-paginator
          [pageSize]="pageSize"
          [pageIndex]="pageNumber-1"
          [pageSizeOptions]="[10, 25, 50, 100]"
          [length]="itemCount"
          (page)="changePaging($event)"
>

假设您的可观察值的返回是一个对象 { list: [], count: xx } count 是总项目数（没有分页）

this.list$ = this.dataSourceService
      .findAll()
      .pipe(tap(r => (this.itemCount = r.count)));

当然您可以在此之后订阅以进行更多操作...

还请检查文档https://material.angular.io/components/paginator/api

Answer 3

@Neter 的答案似乎只有在我按照 @moffeltje 的建议进行时才有效，但是，它给我带来了另一个问题，那就是表格和分页器之间的脱节。
删除这一行：

this.dataSource.paginator = this.paginator;

意味着我的分页器现在已断开连接（下一步按钮对现有表数据没有影响）。

我通过将其包装在永恒的超时中解决了它：

setTimeout(() => {
    this.dataSource.paginator.length = this.paginatorLength;
});

这里的想法是，如果它正在执行覆盖，并且确实如此（请参阅@moffeltje答案），那么这将在覆盖发生的相同“tick”或执行范围内发生。如果我们可以在“写入”发生后进行设置，包括材质库中的任何事件，那么从现在起它就不能被覆盖它正在进行覆盖。

谨慎使用：我强烈建议您不要经常练习

setTimeout

开发，因为它会使您的代码晦涩难懂且难以调试。请将超时放在方法/函数的末尾，并添加注释解释为什么它在那里。