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

我正在尝试使用 mat-paginator 表示我想要显示通过HTTP调用检索的数据的表,但我遇到的问题是我无法将paginator的 length 设置为我从API获得的结果总数 . 在这个例子中,长度在组件中是硬编码的,但是它可以工作) . 这是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);
});

当我调试table.log this.paginator1时,我可以看到_length设置为100,但是当我打开对象时,我看到了浏览器中显示的值(10) .

enter image description here

数据在浏览器中显示正常,我唯一的问题是paginator总是显示1-10的10,我希望它显示1-10的x,其中x是我从API获得的总值东西的个数 . 请指教 . 谢谢!

回答(1)

3 years ago

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