arrays - 嵌套的 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 并创建新的 div，这会导致我的布局滚动到顶部。我尝试了 trackby，但由于整个数组被覆盖，所以无法正常工作。

问题:有没有一种方法可以比较 2 个数组，然后只对前一个数组进行更改。我知道我无法重新加载数据，但这可能会导致问题，因为只有一位用户使用该软件。

编辑:一个例子

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 负责更新 View 。

我放弃了一个简单的 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 值，并在重新呈现元素后应用相同的滚动。