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

Question

Я использовал mat-table в своем приложении Angular7 с firebase и успешно заполнил его. Я хочу добавить серийный номер с автоматическим увеличением.

Мой 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.

Answer 1

Чтобы получить индекс для обновления для следующих страниц ... мы делаем следующее:

([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 здесь