如何设置角材料分页器的长度道具答案

【问题标题】：How to set the length prop for the angular material paginator如何设置角材料分页器的长度道具
【发布时间】：2020-04-23 08:47:09
【问题描述】：

这就是我的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;

【问题讨论】：

贴出相关代码。目前，关于您的代码，我们唯一能看到的是您拥有[length]="100"。我们不知道分页器是什么，如何使用等等。Stackblitz 是您的朋友。
@JBNizet 我已经编辑了我的查询并添加了更多代码，如果您需要特定的内容，请告诉我。
正如我所说，如果您需要帮助，您需要提供所有相关代码。发布一个重现问题的 stackblitz。
嗨@Albert！我有同样的问题，这是我的代码，不能让它工作。你能帮我吗？ stackoverflow.com/questions/68478859/…

标签： angular pagination angular-material

【解决方案1】：

我就是这样用的

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

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

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

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

还要查看文档https://material.angular.io/components/paginator/api

【讨论】：

谢谢。嗯，我尝试过这样做，但由于某种原因它不起作用，但让我再试一次以更具体。
我已经实现了它有点不同，但仍然按照您显示的方式设置 count 参数。我必须说它现在就像一个魅力。万分感谢！ =)
嗨@Neter！我有同样的问题，这是我的代码，不能让它工作。你能帮我吗？ stackoverflow.com/questions/68478859/…