加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

嵌套的ngFor和trackBy,数组的比较

发布时间:2020-12-17 18:10:32 所属栏目:安全 来源:网络整理
导读:我有一个更大的项目,我有4个嵌套* ngFor.所以创作大约200行,我认为分享不会有帮助,所以我尽可能地解释它. 问题是刷新对象后,元素被破坏并重新创建.这导致了一个性能问题(没有什么我只关注0.5秒)和滚动回到顶部.这是我的问题,我不希望这种情况发生. 数组: ar
我有一个更大的项目,我有4个嵌套* ngFor.所以创作大约200行,我认为分享不会有帮助,所以我尽可能地解释它.
问题是刷新对象后,元素被破坏并重新创建.这导致了一个性能问题(没有什么我只关注0.5秒)和滚动回到顶部.这是我的问题,我不希望这种情况发生.

数组:

array[0-X] = For Paginator
 array[X][1-3] = contains 3 columns // #Column
 array[X][X][1-9] = divides the column in 9 blocks // #InfoBlock
 array[X][X][X][1-X] = the content of the single blocks // #Info

创建之后,用户只能在他想要的任何地方移动#Info元素.

例如,将#Info移动到另一个#InfoBlock.通过订阅,我将更改保存到数据库并重新加载整个数组.

像这样:

this.pageinator = result;

现在它会破坏div并创建它们,这导致我的布局滚动到顶部.我试过trackby,但是整个数组的原因被覆盖了它将无法正常工作.

问题:有没有办法比较2个数组,只需对前一个数组进行更改.我知道我无法重新加载数据,但这可能会导致问题,因为该软件仅供1位用户使用.

编辑:一个例子

array[0][1][1][1] = "Content X"
array[0][1][2][2] =  undefined
// After reloading
array[0][1][1][1] =  undefined
array[0][1][2][2] =  "Content X"
// Now I want Angular to just change this 2 elements,cause the others stay the same.

编辑2:
我发现有时候:

this.pageinator = result;

自动仅进行更改.这种情况发生在10次中的1次.

解决方法

由于您控制了数组内部叶子更改的事件,为什么不按位置在数组内部切换值?您在数组中的数组[0] [1] [1] [1]和数组[0] [1] [2] [2]之间切换值,* ngFor负责更新视图.

我放了一个简单的plunkr here

编辑

如果只有叶子在您的阵列上发生变化并且主阵列的元素仍然存在
在同一个位置,你有一个简单的任务,按位置比较元素,并切换元素,因为叶子不同,如:

//this assumes that main array won't change - same length and position
for (let i=0; i < originalArray.length; i++) {
  if (originalArray[i][leafindex] !== newArray[i][leafindex] {
    originalArray[i] = newArray[i];
  }
}

如果主数组更改长度或元素位置,则执行比较以查找更改变得困难且容易出现性能降低.在这种情况下,我建议你像现在一样重写数组,但在更改数据之前采用scrollTop值,并在重新呈现元素后应用相同的滚动.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读