带有分页器的 Mat-Table 未传递正确的索引以进行编辑/删除

Question

我正在使用垫表来显示一些信息。我有一个使用 mat-icon 进行编辑的列，上面有一个点击侦听器。我从该图标触发的函数需要一个索引号，然后从我用来填充 dataTableSource 的数组中提取索引号。然而，由于使用了材料分页器，传递的索引号已关闭。它传递当前页面长度上显示的行的索引，而不是提供给 dataTableSource 的整个数据数组中的项目索引。

组件.html：

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

**Other Columns**

  <ng-container matColumnDef="editItem">
    <mat-header-cell *matHeaderCellDef> Edit Item </mat-header-cell>
    <mat-cell *matCellDef="let productInfo"> <mat-icon matTooltip="Edit 
    List" class="pointer">edit</mat-icon> </mat-cell>
  </ng-container>

</mat-table>

组件.ts：

editProductList(index) {
this.productListService.changeProductId(this.productList.data[index].id);
this.router.navigate(['ProductList/Edit']);
}

我是否必须牺牲 mat-paginator 才能获得我正在寻找的功能？如果没有，我怎样才能捕获 mat 表中项目的正确索引？

非常感谢帮助和提示。

Answer 1

该paginator元素有一个page您可以监听的事件，以跟踪当前正在显示的页面以及每页有多少个项目。

您可以将这两个值存储在组件中（即currentPage和itemsPerPage），然后将索引偏移所需的量。

这意味着您必须像这样修改您的函数：

editProductList(index) {
  const realIndex = index + this.currentPage * this.itemsPerPage;
  this.productListService.changeProductId(this.productList.data[realIndex ].id);
  this.router.navigate(['ProductList/Edit']);
}