行号

Question

我现在在我的angular 6应用程序中使用材质表，我想显示行号从1到第n行递增到所有行。我写了一些代码，但是它只显示1到5的数字，当我转到下一页时，它将再次从1到5的数字加载。

<ng-container matColumnDef="SNo">
  <mat-header-cell *matHeaderCellDef mat-sort-header class="inFilter color-white">
    SNo
    <button mat-icon-button [matMenuTriggerFor]="SNoFilter" class="Filter-icon-WT">
      <mat-icon aria-label="SNo Filter">keyboard_arrow_down</mat-icon>
    </button>
    <mat-menu #SNoFilter="matMenu" yPosition="below" [overlapTrigger]="false" xPosition="before">
      <div class="info-wrapper menuPop">
        <mat-form-field class="w-100 input-label">
          <input matInput placeholder="Search SNo" (click)="handleClick($event)" (keyup)="applyFilter($event.target.value)"
            autofocus>
        </mat-form-field>
        <div class="ta-w">
          <button mat-mini-fab color="warn" class="satPop-ok">
            <mat-icon aria-label="Close">close</mat-icon>
          </button>
        </div>
      </div>
    </mat-menu>
  </mat-header-cell>
  <mat-cell *matCellDef="let element;let i=index"> {{i+1}} </mat-cell>
</ng-container>