Paginator length increase on page event angular material 2

Question

Using table with paginator. Binding data via http call. Version Angular 5, Material 5.0.4

On page event it fetch data from server, i tried to log if there is change in totallength variable but it's not .

What it is showing that length property of pagination which is return from page event is increasing.

It's weird i had also implemented on stackbliz to demonstrate and raise issue on github but there it works fine.

Same code ,same version but locally it's not working as expected.

Also adding gif to demonstrate.

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;

Answer 1

根据我在github上的讨论和我自己找到的解决方案，以下是根据我的经验进行的解释。

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

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

我从中了解到的（https://material.angular.io/components/table/overview#pagination）

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

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

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

所以我删除了这一行

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

现在它正在按预期工作。

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