ngFor索引在使用ngx分页时重置为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，当我去下一页的表。

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

设rawDataListDup的当前指数为100。在控制台中，当函数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

pass "而不是"idx"to assignechange函数

Answer 3

请参考此解决方案

我们可以使用下面的代码获得绝对索引，因为paginate不能识别它。

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

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>