Question

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

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

component.ts：

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

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

非常感谢帮助和提示。

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']);
}

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

1 个答案: