页面事件角度材料2上的分页器长度增加答案

【问题标题】：Paginator length increase on page event angular material 2页面事件角度材料2上的分页器长度增加
【发布时间】：2019-03-21 13:57:43
【问题描述】：

使用带有分页器的表格。通过 http 调用绑定数据。版本 Angular 5，材质 5.0.4

在页面事件中它从服务器获取数据，我尝试记录总长度变量是否发生变化，但事实并非如此。

这表明从页面事件返回的分页的长度属性正在增加。

奇怪的是，我也在 stackbliz 上实现了在 github 上演示和提出问题，但它工作正常。

相同的代码，相同的版本，但在本地它没有按预期工作。

还加了gif来演示。

HTML

 <mat-paginator #paginator [length]="totalLength"
             [pageSize]="limit"

             (page)="changePage($event)">
 </mat-paginator>

.TS

 changePage(event) {
  console.log(event,'total length',this.totalLength)
  if (this.totalLength > this.dataSource.data.length) {
  // next page
  this.skip = event.pageSize * event.pageIndex;
  this.getComplains(true);
  }
}


getComplains(addNew:boolean = false) {
this.http.getCustomerComplains({
  limit: this.limit,
  skip: this.skip,
  total: this.totalLength
}, (data) => {
  if (data) {
    setTimeout(() => {
      if (addNew === true) {
        let oldData = this.dataSource.data;
        this.dataSource.data = oldData.concat(data.list);
      } else {
        if (data['list']) {
          this.dataSource.data = data['list'];
        }
        this.changeDetectorRefs.detectChanges();
      }
      if (this.totalLength === 0) {
        this.totalLength = data['total'];
      }
    })
  }
}, (err) => {
  console.log(err);
})}

limit:number = 10;
skip:number = 0;
totalLength:number = 0;

【问题讨论】：

你为什么不在这里添加你的答案？解决了github.com/angular/material2/issues/10526
Angular Material 团队尚未确认，但我稍后会添加它，以帮助未来面临相同问题的开发人员。

标签： angular angular-material2

【解决方案1】：

基于我在 github 上的讨论并在我的自己的，下面是根据我的经验进行的解释。

我发现，在开始时，或者您可以说当我将数据绑定到表数据源时。我还将分页器长度属性设置为从 http 调用返回的总长度 *（如果总长度为 0）

现在在下一页的页面事件中，总长度属性的值仍然与第一次绑定时相同。但是分页器的长度属性会有所不同。

我的理解（https://material.angular.io/components/table/overview#pagination）

如果您使用 MatTableDataSource 作为表的数据源，只需将 MatPaginator 提供给您的数据源。它会自动监听用户所做的页面更改，并将正确的分页数据发送到表中。

以上适用于静态数据或全部加载一次（通过http调用），但如果我们想在页面事件上加载数据，则适用以下

否则，如果您正在实现对数据进行分页的逻辑，您将需要监听分页器的（页面）输出并将正确的数据片段传递给您的表。

所以我删除了这一行

// this.dataSource.paginator = this.paginator;

现在它按预期工作了。

因此，如果数据源不是动态更改或一次全部加载，那么我们可以简单地将 MatPaginator 提供给您的数据源否则我们不需要。

【讨论】：