嵌套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;

自动只接受更改。这种情况发生在十分之一的情况下。

Answer 1

既然你控制了数组内部的叶子变化事件，为什么不按位置切换数组内部的值呢？您在数组中的array[0][1][1][1] 和array[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 值，并在重新渲染元素后应用相同的滚动。