Angular 材料 2 - mat-paginator [length] 问题

Question

我正在尝试将 ma​​t-paginator 用于要显示通过 HTTP 调用检索到的数据的表，但我遇到的问题是我无法设置 length 的分页器到我从 API 获得的结果总数。在这个例子中，长度在组件中是硬编码的，但这不应该是一个问题（我也尝试在视图上将它设置为 [length]="100" 并且它不起作用）。这是 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"> 
            <span class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill"> 
                <i class="la la-ellipsis-h"></i> 
            </span>
            <span class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" (click)="editPersonalDataItem(element.RecordID)">
                <i class="la la-edit"></i>                      
            </span>
            <span class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill"> 
                <i class="la la-trash"></i> 
            </span>
        </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)。

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

Answer 1

这对我有用

<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 2

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

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

Answer 3

@user4676340 的This comment 是这个问题的正确答案：

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

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

Answer 4

我建议你看看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 }
]