我有一个更大的项目,我有4个嵌套* ngFor.所以创作大约200行,我认为分享不会有帮助,所以我尽可能地解释它.
问题是刷新对象后,元素被破坏并重新创建.这导致了一个性能问题(没有什么我只关注0.5秒)和滚动回到顶部.这是我的问题,我不希望这种情况发生.
问题是刷新对象后,元素被破坏并重新创建.这导致了一个性能问题(没有什么我只关注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次.
解决方法
由于您控制了数组内部叶子更改的事件,为什么不按位置在数组内部切换值？您在数组中的数组[0] [1] [1] [1]和数组[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值,并在重新呈现元素后应用相同的滚动.
