获取角度材料表v5中的行索引

Question

我正在尝试在 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>

doSomething 方法是需要索引的。

任何帮助将不胜感激。

Answer 1

使用 indexOf 是一种巨大的资源浪费。正确的方法是用索引的值初始化一个变量，像这样：

<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>

https://material.angular.io/components/table/examples

更新：

如果您使用分页，可以这样计算索引：

<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>

Answer 2

您可以使用dataSource 的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>

---

Demo

使用@user3891850 解决方案（let i = index;），在分页的情况下，索引将是该页面中的索引，而不是全局对象中的索引，因此您必须小心分页。 example

Answer 3

任何使用 Angular6+ 的人都应该使用 let i = dataIndex 而不是 let i = index，如 Github issue 中所述。

这是 HTML sn-p

<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>

Answer 4

如果您遇到此问题并且您使用的是paginator，则您在此处获得的索引：

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

将是当前显示在表格中的索引。例如，如果您在第 2 页并且页面大小为 5，则表的第一个索引将为 0 而不是 5（或第 6 项）。所以你可以做些什么来获得真正的索引是这样的：

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

如果分页器位于第一页，则索引不会更改。否则将 pageIndex 乘以 pageSize 并将其添加到索引中。

Answer 5

在 mat-table 中增加位置数....

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

Answer 6

我知道这篇文章很旧，但上述解决方案对我不起作用。 相反，如果let i = index; 尝试let i = dataIndex 获取最新版本的mat-table 检查 this solution。不知道它是否只是用于可扩展的表格

Answer 7

我搜索了很多，但对于我的情况，“indexOf”方案无法正常工作，然后我找到了这个answer，它正是我需要的。

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

Answer 8

在 *matRowDef 中包含“让 i = 索引”

Answer 9

我在使用 Angular Material Table 时发现了 2 个案例

• 如果表格有单行模板，则使用*matCellDef="let row = index"
• 如果表格有多个行模板，则使用 *matCellDef="let row = dataIndex"