Как установить серийный номер в мат-таблице угловой 5

Question

Я использовал таблицу соответствия в своем угловом приложении и успешно заполнил ее, но исходные идентификаторы данных не являются последовательными, и данные фильтруются, и должны отображаться только некоторые данные.Есть ли способ добавить автоинкрементный серийный номер.Мой 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

Вы можете добавить инкрементный серийный номер в цикле 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 2

Просто используйте этот код в строке, чтобы получить индекс -

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

Вот

пример разветвленной работы