如何在 Angular Mat-table 中设置索引列（dataIndex 显示“NaN”）答案

【问题标题】：How to set Index column in Angular Mat-table (dataIndex shows 'NaN')如何在 Angular Mat-table 中设置索引列（dataIndex 显示“NaN”）
【发布时间】：2019-05-20 16:12:07
【问题描述】：

垫桌工作完美。有没有办法添加一个自动增量索引。我的 Html 代码：

 <div class="mat-elevation-z8">


<table mat-table [dataSource]="dataSource" matSort>

  <ng-container matColumnDef="no">
    <th mat-header-cell *matHeaderCellDef> No </th>
    <td mat-cell *matCellDef="let element; let i = index;"> {{i+1}} </td>
  </ng-container>
  <ng-container matColumnDef="Title">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>
    <td mat-cell *matCellDef="let element"> <a (click)="openDescriptionView(element.title, element.imageUrl, element.description)">{{element.title}}</a>
    </td>
  </ng-container>

  <ng-container matColumnDef="destination">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Destination </th>
    <td mat-cell *matCellDef="let element"> {{element.destination}} </td>
  </ng-container>

  <ng-container matColumnDef="startDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Start Date </th>

    <td mat-cell *matCellDef="let element"> {{element.startDate}}</td>
  </ng-container>

  <ng-container matColumnDef="endDate">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> End Date </th>

    <td mat-cell *matCellDef="let element">{{element.endDate}}</td>
  </ng-container>

  <ng-container matColumnDef="price">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> price </th>
    <td mat-cell *matCellDef="let element">{{element.price}}</td>
  </ng-container>


  <ng-container matColumnDef="setting">
    <th mat-header-cell *matHeaderCellDef> Settings </th>
    <td mat-cell *matCellDef="let element">
      <a class="myIcon" (click)="editOffer(element.id)"><i class="pe-7s-pen"></i></a>
      <a class="myIcon" (click)="deleteOffer(element.id, element.title)"><i class="pe-7s-trash"></i></a>

    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>

我转到下一页，它又从一个开始。如果我每页显示 10 个项目，那么在转到下一页后，它会以一个而不是 11 个开始。我也试过 let i=dataIndex 并显示'NaN'。请帮忙。

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

您可以像这样使用计算运行索引的单元格：

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

使用这样的分页器：

<mat-paginator #paginator [pageSizeOptions]="[10, 20]" showFirstLastButtons></mat-paginator>

Here 是一个证明这一点的堆栈闪电战。

【讨论】：

【解决方案2】：

您可以将 pageIndex 变量设置为第一页初始化为一个...在每次单击“下一页”时将其设置为 pageIndex = pageIndex + 10;每次点击“后页”时，将其设置为 pageIndex = pageIndex - 10；

【讨论】：