在 Angular 2 中过滤数组之前，如何设置数组的 i=index？答案

【问题标题】：How can I set i=index of array before I filter it in Angular 2?在 Angular 2 中过滤数组之前，如何设置数组的 i=index？
【发布时间】：2023-03-07 07:56:01
【问题描述】：

我目前在 Angular 2 中对客户列表进行分页时遇到问题。这是我的代码的 sn-p：

<tr *ngFor="let client of eClients | filter:term | paginate: { itemsPerPage: 20, currentPage: p}; let i = index" (click)="toggleClient(i)">
   <td>
    <checkbox [(ngModel)]="eClients[i].selected">
     {{client.name}}
    <checkbox>
   </td>
</tr>

问题是索引与数组中的实际位置不对应。例如，如果我转到第 2 页并单击列表中的客户端 #2，我应该得到 22 的索引，但我得到 2。当我从一个页面移动到另一个页面时，索引似乎只跨越 0-19 .它首先过滤数据，然后设置索引。如何在任何过滤器或分页发生之前设置“i=index”？

附： “checkbox”是我自己的模块，“term”是我自己的管道过滤器。

请帮忙。谢谢你

【问题讨论】：

也许它可以工作：{{ ((p - 1) * itemsPerPage) + i }} 或者.. 你可以使用.map() 并创建一个名为index 的属性并在每个对象本身上存储索引。所以，在模板中你可以访问eClients[client.index]。
感谢您的帮助。不幸的是，这两种方法都不起作用。第一种方法我无法访问模板中的 itemsPerPage 或 p，或者当我调用 (click)=toggleClient() 时。第二种方法适用于模板，但当我执行 (click)=toggleClient(eClients[client.index]) 时，点击功能也会出错。无法在函数中使用客户端

标签： angular ngfor pipes-filters

【解决方案1】：

*NgFor 的变量index 用于当前结果。对于您的情况，您可以通过eClients .indexOf(client) 获取original index。

参考plunker。

【讨论】：

哇，感谢您抽出宝贵时间帮助我，我真的很感激！这非常有效。我开始准备改变我的整个代码。

【解决方案2】：

为 formArray 添加 fromGroupName

[formGroupName] = "getFormGroupIndex(i)"

为此函数计算索引：

getFormGroupIndex(index: number): number {
   return index + (this.TableCurPage - 1) * this.ItemPerpage;}

【讨论】：