在Angular中,为什么我的PrimeNG表在更新indexedDB中的行值后重新呈现?

wtzytmuj  于 2023-01-28  发布在  IndexedDB
关注(0)|答案(1)|浏览(159)

我有一个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还是一个新手,所以我不确定我错过了什么,但是如果我只更新一个条目,为什么表会重新呈现呢?有没有其他方法可以防止这种重新呈现被触发?

jrcvhitl

jrcvhitl1#

分页、排序和过滤可以通过绑定到特定属性的模型来控制,其中更改触发分页。
查看文档中的属性:

first
rows
page
sortField
sortOrder
filters

相关问题