问题描述
<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,idx)
}
将 rawDataListDup
的当前索引视为 100
。在控制台中,当调用函数 idx = 0
时,我得到 idx = 100
而不是 AssigneeChange
。当我在表的 page = 2
中时会发生这种情况。每个页面将有 100 个项目。
如何解决这个问题?
解决方法
<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
,
请参考this解决方案..
我们可以使用以下代码获取绝对索引,因为 paginate 无法识别它。
AssigneeChange(data,id,idx){
idx = 100 * (this.q - 1) + idx;
console.log(data,idx)
}
,
将“q”而不是“idx”传递给 AssigneeChange 函数。
,解决方案:使用indexOf()
方法获取循环中item的索引。
<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>