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 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];
  }
}

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

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

1 个答案:

修改