Question

我正在尝试将 mat-paginator 用于我希望显示通过HTTP调用检索的数据的表，但我遇到的问题是我无法设置长度的paginator到我从API获得的结果总数。在这个例子中，长度在组件中是硬编码的，但它不应该是一个问题（我也尝试将它设置在视图上，如[length] =＆＃34; 100＆＃34;它没有＆＃39;工作）。这是HTML：

<mat-table #table1="matSort" [dataSource]="dataSource1" matSort> <ng-container matColumnDef="id"> <mat-header-cell *matHeaderCellDef> <mat-checkbox name="all" class="" [checked]="isAllChecked()" (change)="checkAll($event)" *ngIf="bulkView"></mat-checkbox> </mat-header-cell> <mat-cell *matCellDef="let element"> <mat-checkbox class="" [checked]="isAllRowsSelected" [(ngModel)]="element.state" *ngIf="bulkView"></mat-checkbox> </mat-cell> </ng-container> <ng-container matColumnDef="firstName"> <mat-header-cell *matHeaderCellDef mat-sort-header="CompanyAgent"> First name </mat-header-cell> <mat-cell *matCellDef="let element"> <img class="personal-data-table__img" src="/assets/app/media/img/users/100_3.jpg" alt="user" width="50" /> {{element.firstName}} </mat-cell> </ng-container> <ng-container matColumnDef="lastName"> <mat-header-cell *matHeaderCellDef mat-sort-header="CompanyEmail"> Last name </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell> </ng-container> <ng-container matColumnDef="city"> <mat-header-cell *matHeaderCellDef mat-sort-header="Website"> City </mat-header-cell> <mat-cell *matCellDef="let element"> {{element.city}} </mat-cell> </ng-container> <ng-container matColumnDef="actions"> <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell> <mat-cell *matCellDef="let element"> </mat-cell> </ng-container> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row> </mat-table> <mat-paginator #paginator1 [length]="pag1.pageLength" [pageSize]="pag1.pageSize" [pageSizeOptions]="pag1.pageSizeOptions" [pageIndex]="pag1.pageIndex" (page)="onPaginateChange1($event)"> </mat-paginator>

和组件：

pag1 = { pageSize: 10, pageSizeOptions: [5, 10, 20], pageIndex: 0, pageLength: 100 }; @ViewChild('paginator1') paginator1: MatPaginator; this.route.data.subscribe(data => { this.personalData = data.users.data.persons; this.dataSource1 = new MatTableDataSource(this.personalData); this.dataSource1.paginator = this.paginator1; console.log('this.paginator1: ', this.paginator1); });

当我在console.log this.paginator1中时，我可以看到_length设置为100，但是当我打开对象时，我看到了浏览器中显示的值（10）。

数据在浏览器中显示正常，我唯一的问题是paginator总是显示1-10的10，我希望它显示1-10的x，其中x是我从API获得的值对于项目总数。请指教。谢谢！

Answer 1

@ user4676340的

This comment是此问题的正确答案：

哦，我不明白你在后端而不是在前端有分页！对不起这是我的错。在这种情况下，您的第一个猜测是正确的，除了一件事：您不应将分页器绑定到表格。因为在您的情况下，分页器与您的表无关，所以它仅处理数据。我的猜测是此表的绑定是这里的问题

（我没有特权将该评论转换为答案，所以就是这样）

Answer 2

这对我有用

<mat-paginator  [length]="length" (page)="getServerData($event)" #paginator [pageSizeOptions]="[5, 10, 20, 50]" showFirstLastButtons></mat-paginator>

添加行

this.length = count;

并删除行

this.dataSource1.paginator = this.paginator1;

Answer 3

我建议你看看the internationalization of the paginator。我将为您节省研究时间，以下是您的工作方式：

import { MatPaginatorIntl } from '@angular/material';
export class MatPaginatorI18n extends MatPaginatorIntl {
  itemsPerPageLabel = 'Lines per page';
  nextPageLabel = 'Next page';
  previousPageLabel = 'Previous page';
  getRangeLabel = (page: number, pageSize: number, totalResults: number) => {
    if (!totalResults) { return 'No result'; }
    totalResults = Math.max(totalResults, 0);
    const startIndex = page * pageSize;
    // If the start index exceeds the list length, do not try and fix the end index to the end.
    const endIndex =
      startIndex < totalResults ?
        Math.min(startIndex + pageSize, totalResults) :
        startIndex + pageSize; return `${startIndex + 1} - ${endIndex} sur ${totalResults}`
      ;
  }
}

在您的模块中，请记住导入自定义提供程序：

providers: [
  { provide: MatPaginatorIntl, useClass: MatPaginatorI18n }
]

Answer 4

在这里找到答案https://github.com/angular/components/issues/10526

只需从ts中删除this.tableDataSource.paginator = this.paginator;和分页器的定义即可。

角度材料2 - mat-paginator [长度]问题

4 个答案: