如何在工作台角5中设置序列号
如何在工作台角5中设置序列号
提问于 2018-05-24 05:59:22
我在我的角度应用程序中使用了一个垫子表，并且成功地填充了它，但是数据的原始id不是串行的，数据被过滤，只显示一些数据。是否有方法添加自动递增的序列号。代码的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 item">{{ index + 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>
<ng-container matColumnDef="start_time">
<mat-header-cell *matHeaderCellDef mat-sort-header> Start Time </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.start_time}} </mat-cell>
</ng-container>
<ng-container matColumnDef="end_time">
<mat-header-cell *matHeaderCellDef mat-sort-header> End Time </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.end_time}} </mat-cell>
</ng-container>
<ng-container matColumnDef="total_pins">
<mat-header-cell *matHeaderCellDef mat-sort-header> Total Pins </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.total_pins}} </mat-cell>
</ng-container>
<ng-container matColumnDef="total_cards">
<mat-header-cell *matHeaderCellDef mat-sort-header> Total Cards </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.total_cards}} </mat-cell>
</ng-container>
<ng-container matColumnDef="remarks">
<mat-header-cell *matHeaderCellDef mat-sort-header> Remarks </mat-header-cell>
<mat-cell *matCellDef="let item"> {{item.remarks}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns2"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns2;"></mat-row>
</mat-table>回答 4
Stack Overflow用户
回答已采纳
发布于 2018-05-24 06:10:29
Stack Overflow用户
发布于 2019-12-03 12:37:16
以获得下一页的自动增量索引值.
(页面索引*页面大小+行索引+ 1)
表的td单元循环源代码
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> No.</th>
<td mat-cell *matCellDef="let item; let i = index">
{{ (paginatorRef.pageIndex * paginatorRef.pageSize) + (i + 1) }}
</td>
</ng-container>mat-分页器源代码
<mat-paginator
fxFlex="100"
#paginatorRef
[length]="5"
[pageSize]="5"
[pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>注意:将本地引用作为#paginatorRef添加到mat-分页器代码中
Stack Overflow用户
发布于 2021-02-10 12:18:18
如果您从角度使用分页器，那么
<td mat-cell *matCellDef="let item; let i = index">
{{ (paginatorRef.pageIndex * paginatorRef.pageSize) + (i + 1) }}
</td>
<mat-paginator
#paginatorRef>
</mat-paginator>如果您没有使用分页器，并且整个表位于一个页面中，那么
<td mat-cell *matCellDef="let element; let i = index;"> {{i+1}} </td>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50501969
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号