Получить номер индекса массива объекта и добавить его в мат-таблицу с другими данными объекта

Question

Я пытаюсь получить порядковый номер каждого элемента и добавить его в конкретную строку с данными. Я использовал *matCellDef="let element; let i = index", и он не очень хорошо работает с mat-paginator.

Ожидаемый результат:

component.ts

getNotifications(){     
    this.notificationService.getNotifications()
            .pipe(first())
            .subscribe(
                data => {
                  this.notifications = <Notification[]>data;
                  this.dataSource = new MatTableDataSource();
                  this.dataSource.data = data;
                  this.dataSource.paginator = this.paginator;
                },
                error => {
                  console.log("An Error Occurred");
                });
  }

Answer 1

Индексирование

работает только с текущими элементами, которые отображаются на странице. вам нужно создать формулу с pageize и pageindex подобно {{(i)+(pageEvent.pageSize*pageEvent.pageIndex)}}

, вы получите размер и индексное значение из нумерации страниц, используя ** pageEvent **

<mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]"
                 [showFirstLastButtons]="true"
                 (page)="pageEvent = $event">

нажмите здесь для демонстрации