嵌套的ngFor和trackBy,数组的比较
发布时间:2020-12-17 18:10:32 所属栏目:安全 来源:网络整理
导读:我有一个更大的项目,我有4个嵌套* ngFor.所以创作大约200行,我认为分享不会有帮助,所以我尽可能地解释它. 问题是刷新对象后,元素被破坏并重新创建.这导致了一个性能问题(没有什么我只关注0.5秒)和滚动回到顶部.这是我的问题,我不希望这种情况发生. 数组: ar
我有一个更大的项目,我有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次. 解决方法
由于您控制了数组内部叶子更改的事件,为什么不按位置在数组内部切换值?您在数组中的数组[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值,并在重新呈现元素后应用相同的滚动. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |