Angular 获取角材质表v5中的行索引

我正试图以html格式获取表中行的索引，该索引已使用angular material v5.2实现。是否有任何方法可用于获取索引

参考代码：

<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

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

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
     <button (click)="doSomething()"> Do something</button>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
</div>

不
{{element.position}
做点什么

方法doSomething是需要索引的

---

非常感谢您的帮助。

您可以使用

数据源的
filteredData
属性，如下所示：

<ng-container matColumnDef="weight">
  <th mat-header-cell *matHeaderCellDef> Header</th>
  <td mat-cell *matCellDef="let element"> {{dataSource.filteredData.indexOf(element)}} </td>
</ng-container>

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let element; let i = index">{{i + 1}}</td>
</ng-container>

index =
      this.paginator.pageIndex > 0
        ? index + this.paginator.pageIndex * this.paginator.pageSize
        : index;


标题
{{dataSource.filteredData.indexOf（element）}



对于@user3891850解决方案（
let i=index；
），在分页时，索引将是此页面中的索引，而不是全局对象中的索引，因此在分页时必须小心。
使用indexOf是一种巨大的资源浪费。正确的方法是使用索引值初始化变量，如下所示：

<ng-container matColumnDef="weight">
  <th mat-header-cell *matHeaderCellDef> Header</th>
  <td mat-cell *matCellDef="let element"> {{dataSource.filteredData.indexOf(element)}} </td>
</ng-container>

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let element; let i = index">{{i + 1}}</td>
</ng-container>

index =
      this.paginator.pageIndex > 0
        ? index + this.paginator.pageIndex * this.paginator.pageSize
        : index;


号码。
{{i+1}}


更新：

如果使用的是分页，则可以通过以下方式计算索引：

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let i = index">
  {{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}
  </td>
</ng-container>


号码。
{{this.paginator.pageIndex==0？i+1:1+i+this.paginator.pageIndex*this.paginator.pageSize}
如果您遇到此问题，并且您正在使用
分页器
您在此处获得的索引：

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

如果分页器位于第一页，则索引不会更改。否则，将pageIndex乘以pageSize并将其添加到索引中。
我搜索了很多次，但对于我的案例，“indexOf”场景无法正常工作，于是我找到了它，它正好满足了我的需要

let i = index;
i + (paginator.pageIndex * paginator.pageSize);

我知道这篇文章很旧，但上面的解决方案对我不起作用。
相反，如果
让i=索引尝试使用最新版本的mat表格检查
. 不知道它是否只是用于可扩展表

在*matRowDef中包括“let i=index”
增加mat表中的位置编号

<ng-container matColumnDef="index">
  <th mat-header-cell *matHeaderCellDef> Sr.No </th>
  <td mat-cell *matCellDef="let i=index"> {{i+1}} </td>
</ng-container>


高级工程师
{{i+1}}
任何使用Angular6+的人都应该使用
let i=dataIndex
，而不是如本文所述的
let i=index

下面是HTML代码片段

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
  <td mat-cell *matCellDef="let element; let i = dataIndex">{{i + 1}}</td>
</ng-container>


号码。
{{i+1}}
这是正确的方法。如果您没有使用本列中数据源中的任何内容（例如
元素
），则无需声明它。你可以只做
{{i}}
{{i}}
这个工作让我困惑的一件事是，为什么法语的答案有一半是正确的？@zgluis如果我们将mat paginator与mat table一起使用，如何实现同样的效果？这是可行的，你需要定义paginator id，我们在同一个HTML文件上使用了多个paginator
{{this.TableTwoPaginator.pageIndex==0？i+1:i+1+this.TableTwoPaginator.pageIndex*this.TableTwoPaginator.pageSize}
谢谢…！！！这很有效。{code>{dataSource.filteredata.indexOf（element）}
太好了，我使用了{{dataSource filteredata.indexOf（element）+1}为了避免值0。谢谢你！！是的，我很惊讶为什么他们都可以使用索引。他们不使用分页…这是分页mat table真正需要的。你知道渲染执行了多少次，每次都要查找索引吗？这会导致大表的性能低下。
dataIndex
-这是正确答案！！谢谢！这么多答案，但只有这一个是有效的。