我有一个PrimeNG表,它将从Dexie获取的对象数组作为数据源,在组件的ngOnInit
中,我通过以下方式从Dexie获取数据:
db.myTable.toArray().then( items => {
this.items = items;
});
然后将返回的数据绑定到PrimeNG表:
<p-table
#dt
[value]="items"
dataKey="id"
[rows]="10"
[rowsPerPageOptions]="[5, 10, 50, 100, 200]"
[paginator]="true"
selectionMode="single"
[(selection)]="selectedItem"
(onRowSelect)="onEditItem()"
[columns]="defaultCols"
[resetPageOnSort]="false"
>
每当用户更新这个表中的一行时,我就更新组件的数组以及Dexie中的表:
item.propertyToUpdate = newValue;
let idxToUpdate = this.items.findIndex( x => x.id === item.id );
this.items[idxToUpdate] = item;
db.myTable.where({id: item.id}).modify({key: newValue})
然而,这个更新导致我的表重新呈现并清除所有过滤器、排序和分页,即使只更新了一个项。
我尝试了以下方法:
- 使用表的
rowTrackBy
属性并传递一个返回每个项的唯一ID的函数,以便只检测对特定行的更改 - 将表值绑定到Observable(使用Dexie的liveQuery函数)
- 将表值绑定到从Dexie获取的原始数组的副本,并且还更新副本(在Dexie更改原始数组触发重新呈现的情况下)
我对indexedDB还是一个新手,所以我不确定我错过了什么,但是如果我只更新一个条目,为什么表会重新呈现呢?有没有其他方法可以防止这种重新呈现被触发?
1条答案
按热度按时间jrcvhitl1#
分页、排序和过滤可以通过绑定到特定属性的模型来控制,其中更改触发分页。
查看文档中的属性: