嵌套的ngFor和trackBy，数组的比较 [英] Nested ngFor and trackBy, comparsion of arrays

问题描述

我有一个更大的项目，我有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个数组，而只需对前一个数组进行更改.我知道我无法重新加载数据，但这会引起问题，因为该软件仅由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;

仅自动进行更改.这发生在十分之一中.

解决方案

既然您控制数组内部叶子更改的事件，为什么不按位置切换数组内部的值呢?在数组中的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值，然后在重新渲染元素后应用相同的滚动.

I have a bigger project there I have 4 nested *ngFor. So the creation is arround 200 lines long, I think sharing wouldn´t help so I explain it as good as I can. The problem is after refreshing the object, the elements get destroyed and recreated. Which leeds to a performance issue (Nothing I matter about just 0,5 seconds) and an scrolling back to the top. And this is my problem I dont want this happening.

The array:

 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

After the creation, the user is able to move only the #Info element over his settings wherever he want.

As example moving a #Info to a different #InfoBlock. Via subscription I save the change to the database and reload the whole array.

Like this:

this.pageinator = result;

Now it destryoys the divs and creates them new, this leads my layout to scroll to top. I tried trackby, but cause of the whole array is overwritten it won't work.

The question: Is there a way to comparison 2 arrays and just take the changes to the previous one. I know I could not reload the data, but this can cause problems because the software isn´t used by just 1 user.

Edit: An example

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. 

Edit 2: I have found out that sometimes:

this.pageinator = result;

Automaticly only take the changes. This happens in 1 out of 10 times.

解决方案

Since you control the event of leaf change inside the array, why not to switch values inside of array by position? You switch the values between array[0][1][1][1] and array[0][1][2][2] in the array and the *ngFor takes care of updating the view.

I dropped a simple plunkr here

Edit

If only the leafs change on your array and the elements of the main array remain on the same position, then you have an easy mission of comparing the elements by position and switch the elements as the leafs are different like:

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

If the main array changes length or elements position, the implementation of comparison to look for the changes became difficult and prone to slow performance. In that case, I'll advise you to do it like you do now with rewriting the array, but take the scrollTop value before changing the data and apply the same scroll after the elements are re-rendered.

这篇关于嵌套的ngFor和trackBy，数组的比较的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！