分页只在第一页显示条目

Question

由于包含超过 30k 条目的大量数据，我决定创建一个带有 paginaton 的 mat 表。所以它现在使用我的过滤器工作正常，我唯一的问题是只有第一页显示条目并且页面导航不起作用。所以如果我点击下一页，下一页是空的

这是我的分页器：

  this.persons = data; 
  this.personsFiltered = new MatTableDataSource(this.persons);
  this.personsFiltered.paginator = this.paginator;

FilterChanged(){ //this filter works with a input field to search for a special name
    this.personsFiltered = of(this.persons).pipe(
      //Name
      map( p => (!this.vornameFilter || this.vornameFilter.trim() === '') ? p: p.filter((i: any) => i.vorname?.toLowerCase().includes(this.vornameFilter.toLowerCase()))),
      
     map(p => p.slice(this.paginator?.pageIndex * this.paginator?.pageSize, this.paginator?.pageSize)) 
    )
  }

我的桌子：

<table mat-table [dataSource]="personsFiltered" *ngIf="personsFiltered">

<ng-container matColumnDef="Name">  
                    <th mat-header-cell *matHeaderCellDef  > Name </th>
                    
                    <td mat-cell *matCellDef="let user"> 
                        {{user.nachname}}, {{user.vorname}}
                    </td>  
                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>  
                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator (click)="FilterChanged()" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>  

为什么不显示其他页面上的条目？

Answer 1

1. 您错过了length 和pageSize 选项，请将它们提供给mat-paginator，它应该会有所帮助：

<mat-paginator [length]="personsFiltered.data.length" [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

1. 您还需要在过滤功能中修复分页 - 详情如下。

2a. 修复分页的第一种方法是从函数中删除这部分 (map(p => p.slice(this.paginator?.pageIndex * this.paginator?.pageSize, this.paginator?.pageSize)) ) 并应用 MatTableDataSoruce - 这是我绝对推荐的，因为它使事情变得更容易，如果你需要，它也可以更容易添加排序和将此排序与过滤相结合。 Angular Material 的文档（https://v5.material.angular.io/components/table/examples - 带分页的表格）中就是一个很好的例子，他们的 Stackblitz 例子在这里：https://stackblitz.com/angular/kbxroarjbeb

您还可以查看此处提供的示例：https://stackoverflow.com/a/50269705/14556461

在这种方法中，分页由 mat-paginator 自动完成，您的自定义代码会删除应该在下一页显示的数据 - 分页器无法加载更多数据，因为该函数会删除数据。

2b. 另一种方法是更手动地进行分页 - 您可以使用来自mat-paginator 的page 事件，如下所示：

<mat-paginator
  [length]="length"
  [pageSize]="pageSize"
  [pageSizeOptions]="pageSizeOptions"
  (page)="changePage($event)"
>
</mat-paginator>

然后在你的组件中：

changePage(pageEvent: PageEvent) {
  const startIndex = pageEvent.pageIndex * pageEvent.pageSize;
  const endIndex = startIndex + pageEvent.pageSize;
  this.personsFilteredForCurrentPage = this.personsFiltered.slice(startIndex, endIndex);
}

在 HTML 中，只需在 mat-table 中显示 personsFilteredForCurrentPage 而不是 personsFiltered。更新过滤器时更新personsFiltered。这样分页与过滤分离，因此您不必在每次切换页面时过滤所有项目。

当您更改表格中的过滤器时调用FilterChanged()。 您还需要处理更改过滤器/过滤器时发生的情况 - 随着数据的更改，您还需要在过滤器更改后更新 personsFilteredForCurrentPage 以刷新表中的数据。

顺便说一句。这个(click)="FilterChanged()" 在这个地方看起来很奇怪——你确定它应该在这里吗？似乎应该在单击某些按钮或更改输入时调用此函数。无论如何，当您单击分页器时，我会避免调用它。

Answer 2

所以最后我们找到了解决方案。它比我们在这里想的要复杂得多。我们在后端控制器中创建了一个计数方法，如下所示：

 [HttpGet("get/count")]
 public int GetPersonensCount()
 {
      return _context.Personens.Count();
 }

我们还将 count 方法处理到我的服务和订阅中，如下所示：

getPersonDetails(start: number = 0): Observable<PersonenSharing[]>{
    return this.http.get<PersonenSharing[]>(this.pController + start);
  }
  
  

getData(){
      this.pService.getPersonCount().pipe(
        tap(count => {
          for(let i = 0; i < count; i+=100){
            this.pService.getPersonDetails(i).subscribe(data => {
              if(!this.persons){
                this.persons = [];
                this.personsFiltered = new MatTableDataSource(this.persons);
                this.personsFiltered.paginator = this.paginator;
              }
              this.persons = this.persons.concat(data);
              this.FilterChanged();
              if(this.persons.length == count){
                this.loaded = true;
              }
            })
          }
        })
      ).subscribe();

这就是它的工作原理，目前唯一的问题是性能。