如何在角度材料表中定义索引答案

【问题标题】：how to define index in angular material table如何在角度材料表中定义索引
【发布时间】：2018-04-04 10:05:10
【问题描述】：

当使用角度材料表时我应该如何定义索引变量，因为该表中没有使用ngFor。

我确实在文档中搜索过它，但在它的任何地方都没有提到索引。

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

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- 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">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

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

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

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

我在哪里以及如何为我在这个表中使用的数组定义一个索引变量，以便我可以在我的表本身中绑定索引值。

【问题讨论】：

从API取数据的时候可以处理索引值并设置吗？
对不起，我没有得到你。能说清楚一点吗？

标签： javascript angular typescript angular-material2

【解决方案1】：

您可以像使用*ngFor 一样将index 添加到let element; let i = index;" 吗？

<mat-row *matRowDef="let row; columns: displayedColumns; let i = index"></mat-row>

或者像这样：

<ng-container matColumnDef="index">
  <mat-header-cell *matHeaderCellDef> Index </mat-header-cell>
  <mat-cell *matCellDef="let element; let i = index;">{{i}}</mat-cell>
</ng-container>

工作示例：https://stackblitz.com/edit/angular-acdxje?file=app/table-basic-example.html

【讨论】：

谢谢。会试一试，让你知道它是否有效:)
没问题。这是一个有效的 StackBlitz 示例。 stackblitz.com/edit/angular-acdxje?file=app/…
有效！但我很想知道这是从哪里来的……你怎么知道有一个可变索引可供使用？有人可以进一步解释一下吗？
如果您启用了分页，请注意它会在每页重复
如果你有分页，你可以计算像{{this.paginator.pageIndex * this.paginator.pageSize + i}}这样的行索引

【解决方案2】：

对于将mat-table 的multiTemplateDataRows 属性设置为true 的任何人，您都不能使用index。相反，您可以使用dataIndex 或renderIndex。

<mat-cell *matCellDef="let row; let i = dataIndex;">{{i}}</mat-cell>

见https://github.com/angular/material2/issues/12793

【讨论】：

谢谢你，你拯救了我的一天：D
你应该得到所有的赞成票！我花了一个多小时试图弄清楚为什么我的索引没有工作，直到我遇到了你的金块！非常感谢！
如果启用分页，请注意它会在每页重复
这个答案是宝

【解决方案3】：

对于那些在使用分页时保持正确索引问题的人来说，哪个表有超过 1 页。当您有可编辑的元素时，这一点尤其重要，因此您使用 routerLink 来添加/编辑/删除选定的元素。

<ng-container matColumnDef="title">
 <mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell>
 <mat-cell *matCellDef="let book; let i = index;" fxLayoutAlign.lt-md="center center">
  <button mat-button [routerLink]="[i + (paginator.pageIndex * paginator.pageSize)]" routerLinkActive="active"</button>
 </mat-cell>
</ng-container>

还有

<mat-paginator #paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

本质上，i + (paginator.pageIndex * paginator.pageSize) 是解决方案，但它从 0 开始计算。如果您想从 1 开始索引，只需将其设为 (i+1) + (paginator.pageIndex * paginator.pageSize)。值得注意的是，您确实需要 #paginator 和 [pageSize]="VALUE"。

【讨论】：

非常感谢。这正是我想要的:)
<td td mat-cell *matCellDef="let index = index">{{ (index + 1) + (paginator.pageIndex * paginator.pageSize) }}</td> 最适合分页数据表。谢谢。
Worth to note is that you really need the #paginator and [pageSize]="VALUE". 这是真正的钥匙。
非常感谢，它正在工作。 {{ i + (paginator.pageIndex * paginator.pageSize) + 1}}

【解决方案4】：

如果有人使用<mat-paginator ../>，那么索引可以解释如下

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

【讨论】：

【解决方案5】：

在 Angular 5 中，您可以使用 index as i 将 index 别名为局部变量 i

<ng-container matColumnDef="rowIndex">
  <mat-header-cell *matHeaderCellDef> Index </mat-header-cell>
  <mat-cell *matCellDef="let element;index as i;"> {{ i }} </mat-cell>
</ng-container>

【讨论】：

【解决方案6】：

如果您在 mat-table 中使用分页，

<ng-container matColumnDef="index">
   <mat-header-cell *matHeaderCellDef> Index </mat-header-cell>
   <mat-cell *matCellDef="let element; index as i">
        {{tableOnePaginator.pageSize * tableOnePaginator.pageIndex + i + 1}}</mat-cell>
</ng-container>

在这里，这个 tableOnePaginator 需要在你的 ts 组件中定义，然后才能使用它。并确保您已将其设置为您的数据源，如下所示。

this.dataSource.paginator = this.tableOnePaginator;

【讨论】：

【解决方案7】：

如果你使用分页器试试这个：

<ng-container matColumnDef="position">
  <th mat-header-cell *matHeaderCellDef> Position </th>
  <td mat-cell *matCellDef="let element; let i = index"> {{(i+1) + (paginator.pageIndex*paginator.pageSize)}} </td>
</ng-container>

这对 Angular 8 版非常有效。你必须使用#paginator 和 [pageSize]="VALUE"

【讨论】：

【解决方案8】：

&lt;td mat-cell *matCellDef="let row; let indx = dataIndex"&gt;

当使用 multiTemplateDataRows 指令为每个数据对象支持多行时，*matRowDef 的上下文是相同的，只是 index 值被替换为 dataIndex 和 renderIndex.

【讨论】：

【解决方案9】：

如果您正在使用分页器，并且希望在每次页面更改时放置索引，请使用以下代码；在 .HTML 文件中：-

<ng-container matColumnDef="Position">
   <th mat-header-cell *matHeaderCellDef> # </th>
   <td mat-cell *matCellDef="let element; let i= index"> {{i + 1 +
     (thirdPaginator.pageIndex*thirdPaginator.pageSize) }}</td>
</ng-container>

【讨论】：