60

我正在尝试在 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 方法是需要索引的。

任何帮助将不胜感激。

4

9 回答 9

111

使用 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>
于 2018-05-24T21:45:31.953 回答
27

您可以使用 的filteredData属性dataSource，如下所示：

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

演示

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

于 2018-05-11T12:43:16.933 回答
22

任何使用 Angular6+ 的人都应该使用let i = dataIndex而不是let i = index在这个Github 问题中解释。

这是 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>
于 2020-09-15T12:53:08.080 回答
10

如果您遇到此问题并且您使用的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 并将其添加到索引中。

于 2019-05-10T19:12:56.990 回答
7

增加 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>
于 2019-11-12T13:29:38.370 回答
5

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

于 2019-08-24T19:37:14.363 回答
1

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

  • *matCellDef="let row = index"如果表有单行模板，则使用
  • *matCellDef="let row = dataIndex"如果表格有多个行模板，则使用
于 2021-12-25T01:40:55.757 回答
0

在 *matRowDef 中包含 'let i = index'

于 2019-09-18T09:03:23.683 回答
0

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

let i = index;
i + (paginator.pageIndex * paginator.pageSize);
于 2019-08-20T08:59:41.470 回答