如何在带有分页的angular 7 Mat-table中设置正确的序列号

时间:2019-04-02 11:01:27

标签: angular pagination angular-material angular7 angular-material-table

我在Angular7应用程序中使用了mat-table并带有firebase,并成功填充了它。我想添加一个自动递增的序列号。

我的 HTML 代码:

<mat-table #table2 [dataSource]="dataSource2" matSort>
 <ng-container matColumnDef="sn">
 <mat-header-cell *matHeaderCellDef mat-sort-header> SN. </mat-header-cell>
 <mat-cell *matCellDef="let element; let i = index;">{{i+1}}</mat-cell>
  </ng-container>
 <ng-container matColumnDef="description">
 <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.description}} </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 [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>

分页问题

  • 当我转到下一页时,索引从一个位置重新开始。
  • 如果我每页显示5个项目,则转到下一页后,它以1而不是6开头。

1 个答案:

答案 0 :(得分:0)

要获取下一页要更新的​​索引...我们执行以下操作:

([[pageIndex] X [pageSize])+([rowIndex] + 1) ...在我们的代码中归结为以下内容:

<mat-table #table2 [dataSource]="dataSource2" matSort>
 <ng-container matColumnDef="description">
 <mat-header-cell *matHeaderCellDef mat-sort-header> Description </mat-header-cell>
    <mat-cell *matCellDef="let item; let j = index"> 
      {{ (j+1) + (myPaginator.pageIndex * myPaginator.pageSize) }} - 
      {{item.description}} </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 #myPaginator [length]="25"
              [pageSize]="5"
              [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator> 

您可以检查工作stackblitz demo here