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

Question

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

Consider rawDataListDup items as 300 . In above code idx value reset to 0, when ever I go to next page in table.

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

Consider the current index of rawDataListDup as 100 . In the console i get idx = 0 instead of idx = 100 when function AssigneeChange is called. This happens when i am in page = 2 of table. In every page there will be 100 items.

How to solve this problem?

Answer 1

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

add to index the multiple between pageSize and itemsPerPage .

example:

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

Answer 2

Please refer this for solution..

We can get absolute index using below code since paginate doesn't recognise it.

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

Answer 3

pass "q" instead of "idx" to AssigneeChange function.

Answer 4

Solution: Using indexOf() method to get index of item in the loop.

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