如何使用分页在 angular 7 Mat-table 中设置正确的序列号
How to set correct serial numbers in angular 7 Mat-table with Pagination
我在带有 firebase 的 Angular7 应用程序中使用了 mat-table 并成功填充了它。我想添加一个自动递增的序列号。
我的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 个项目,那么在转到下一页后它会以一个而不是 6 个开始。
要为下一页更新索引...我们执行以下操作:
( [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
我在带有 firebase 的 Angular7 应用程序中使用了 mat-table 并成功填充了它。我想添加一个自动递增的序列号。
我的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 个项目,那么在转到下一页后它会以一个而不是 6 个开始。
要为下一页更新索引...我们执行以下操作:
( [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