Angular 8：如何获取 table 的过滤值索引

Question

我正在与 Angular 8 和 ng-bootstrap's pagination component 合作。单击表格行时，我想打开一个包含详细信息的模式，它适用于未过滤的行，但在我过滤 table 之后，索引不再正确。

例如，如果我有一个数组 a=[1,2,3,4,5] 并且在过滤后 table 列表例如 a[2],a[3] 如果我单击结果中的第一个元素，我得到的是 a[0] 而不是 a[2]。我怎样才能得到正确元素的索引来显示模态？

第二个问题是我不知道如何更新分页页面而不是显示一个或两个结果页面它显示全部。

<table>
  <tbody>
    <tr
      *ngFor="let element of tableElements | filterTable:filterString; index as i"
      (click)="openModal(((+selectedPage-1) * +pageSize) + i)"
      >
      <td scope="row" class="text-center">
          {{ element}}
      </td>
    </tr>
  </tbody>
</table>

<!-- Pagination -->
<ngb-pagination
  [collectionSize]="collectionSize"
  [maxSize]="6"
  [(page)]="selectedPage"
  [pageSize]="pageSize"
>
</ngb-pagination>

Answer 1

在组件代码中进行过滤 - 这是最直接和高效的方式。

在组件中

allItems: SomeItems[];
filteredItems: SomeItems[];

///on some action or whatever
onFilterChange(...){
    filteredItems=allItems.filter(yourPredicates)
}

并在模板中

<tr *ngFor="let element of filteredItems> .....</tr>

Angular 8：如何获取 table 的过滤值索引

Angular 8: how can I get the index of filtered values of a table

angular

angular8

ng-bootstrap