我在我的 Angular 应用程序中使用了一个 mat-table 并成功填充了它,但是数据的原始 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>
最佳答案
只需连续使用此代码即可获取索引-
<td mat-cell *matCellDef="let element; let i = index;"> {{i+1}} </td>
这里是
forked working example
关于angular - 如何在 Mat-table angular 5 中设置序列号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50501969/