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

rawDataListDup項目視為300 。 在上面的代碼中， idx值重置為 0，當我 go 到表中的下一頁時。

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

將rawDataListDup的當前索引視為100 。 在控制台中，當調用 function AssigneeChange時，我得到idx = 0而不是idx = 100 。 當我在表格的page = 2時會發生這種情況。 每頁將有 100 個項目。

如何解決這個問題呢？

Answer 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

Answer 2

請參考此解決方案..

我們可以使用下面的代碼獲得絕對索引，因為分頁無法識別它。

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

Answer 3

將“q”而不是“idx”傳遞給 AssigneeChange function。

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