如何在Mat-table angular 5中设置序列号

Question

我在我的角应用程序中使用了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>

Answer 1

只需连续使用此代码即可获得索引 -

<td mat-cell *matCellDef="let element; let i = index;"> {{i+1}} </td>

这是

forked working example

Answer 2

您可以在ngFor循环中添加增量序列号，即

<meta-table *ngFor="let item of items; let i = index;">
  <ng-container matColumnDef="sn">
    <mat-header-cell *matHeaderCellDef mat-sort-header> SN. </mat-header-cell>
    <mat-cell *matCellDef="let item">{{ i + 1 }}</mat-cell>
  </ng-container>
</meta-table>

Answer 3

要获取到下一页的自动增量索引值。

（[[页面索引] * [页面大小] + [行索引+ 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-paginator源代码

<mat-paginator
    fxFlex="100"
    #paginatorRef
    [length]="5"
    [pageSize]="5"
    [pageSizeOptions]="[5, 10, 25, 100]">
</mat-paginator>

  

[注意：将本地参考作为#paginatorRef添加到您的   mat-paginator代码]

Answer 4

如果你从 angular 使用分页器

<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>