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

Question

我有一个更大的项目,我有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次.

Answer 1

既然你控制了数组内部叶子变化的事件，为什么不按位置切换数组内部的值呢？您可以在数组之间切换值，array[0][1][1][1]并在数组中切换值，并负责更新视图。array[0][1][2][2]*ngFor

我在这里丢了一个简单的plunkr

编辑

如果只有数组上的叶子发生变化并且主数组的元素保持在相同位置，那么您可以轻松地按位置比较元素并切换元素，因为叶子不同，如下所示：

//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值，并在重新渲染元素后应用相同的滚动。