与 ngx-pagination 一起使用时，ngFor 索引重置为 0

Posted 2023-03-29

【中文标题】与 ngx-pagination 一起使用时，ngFor 索引重置为 0

【英文标题】：ngFor index reset to 0 when used with ngx-pagination

【发布时间】：2021-05-29 11:52:24

【问题描述】：

<tr *ngFor="let data of rawDataListDup | filter:searchText | paginate:  itemsPerPage: 100,currentPage: q ; let idx = index">
<td>
  <select (change)="AssigneeChange(data,$event.target.value,idx)">
   <option [value]="data1.id" *ngFor="let data1 of groupList"> data1.name </option>
  </select>
</td>
</tr>

将rawDataListDup 项目视为300。在上面的代码中，idx 值重置为 0，当我转到表中的下一页时。

AssigneeChange(data,id,idx)
  console.log(data,id,idx)

将rawDataListDup 的当前索引视为100。在控制台中，当函数AssigneeChange 被调用时，我得到idx = 0 而不是idx = 100。当我在表的page = 2 中时会发生这种情况。每页将有 100 个项目。

如何解决这个问题？

【参考方案1】：

<tr *ngFor="let data of rawDataListDup 
   | filter:searchText 
   | paginate:  itemsPerPage: 100,currentPage: q ; 
   let idx = index + paginate.currentPage  * paginate.itemsPerPage;
">

添加以索引pageSize 和itemsPerPage 之间的倍数。

示例：

page 0: item 0 = 0 + 0 * 10 = 0
page 0: item 1 = 1 + 0 * 10 = 1
page 1: item 0 = 0 + 1 * 10 = 10
page 1: item 1 = 1 + 1 * 10 = 11

【讨论】：

Parser Error: Unexpected token ; at column 161 in [let data of rawDataListDup | filter:searchText | paginate: itemsPerPage: 100,currentPage: q ; let idx = index + paginate.currentPage * paginate.itemsPerPage;]

尝试从末尾删除;

Parser Error: Unexpected token +, expected identifier, keyword, or string at column 114 in [let data of rawDataListDup | filter:searchText | paginate: itemsPerPage: 100,currentPage: q ; let idx = index + paginate.currentPage * paginate.itemsPerPage]

【参考方案2】：

将“q”而不是“idx”传递给 AssigneeChange 函数。

【参考方案3】：

解决方法请参考this..

我们可以使用下面的代码获取绝对索引，因为分页无法识别它。

AssigneeChange(data,id,idx) 
idx = 100 * (this.q - 1) + idx;
console.log(data,id,idx)

【参考方案4】：

解决方案：使用indexOf() 方法获取循环中项目的索引。

<tr *ngFor="let data of rawDataListDup | filter:searchText | paginate:  itemsPerPage: 100,currentPage: q ;>
  <td>
    <select (change)="AssigneeChange(data,$event.target.value, rawDataListDup.indexOf(data)">
      <option [value]="data1.id" *ngFor="let data1 of groupList"> data1.name </option>
    </select>
  </td>
</tr>