Angular 使用trackBy仅在ngFor中对象的特定属性更改时渲染DOM
我正在尝试为2Angular 使用trackBy仅在ngFor中对象的特定属性更改时渲染DOM,angular,Angular,我正在尝试为2ngFor迭代器设置trackBy,这2个迭代器以前导致加载问题,显著降低了应用程序的速度,因为我在ngFor中有row.getRows()。我更改了它,使行仅在组件init中检索,并修复了问题,每次ngFor渲染时不再处理数组 现在我需要更新mousemove事件中频繁出现的单元格属性isSelected,它可能会导致相同的缓慢加载滞后效应。我认为只有在单个属性发生更改时才渲染DOM元素才能修复它,因此,如果单元格的属性发生更改,我如何才能仅渲染cell/td <tr *n
ngFor
迭代器设置trackBy
,这2个迭代器以前导致加载问题,显著降低了应用程序的速度,因为我在ngFor中有row.getRows()
。我更改了它,使行仅在组件init中检索,并修复了问题,每次ngFor渲染时不再处理数组
现在我需要更新mousemove事件中频繁出现的单元格属性isSelected
,它可能会导致相同的缓慢加载滞后效应。我认为只有在单个属性发生更改时才渲染DOM元素才能修复它,因此,如果单元格的属性发生更改,我如何才能仅渲染cell/td
<tr *ngFor="let row of rows">
<td *ngFor="let cell of row.cells">
{{cell.value}}
</td>
</tr>
{{cell.value}}
Angular足够智能,仅当值发生更改时才更新DOM
也就是说,如果行
发生更改,则会重新创建表中的每个
。如果行
发生更改,则该行中的每个
都会更新。如果cell.value
更改,则该单元格的单个文本节点将更新
(更改意味着oldValue!=newValue
。也就是说,对象是按标识而不是按内容进行比较的)
getRows()
的问题是每次调用getRows()
都可能返回一个新的数组对象。也就是说,行
总是会更改,这就是angular重新创建整个表的原因
长话短说:如果迭代的数组发生了变化,但其中的对象保持相似,那么trackBy很有用。然后,trackBy可以告诉angular如何将旧对象匹配到新对象,并重用旧的DOM节点,因此只有这些对象中的更改才会导致DOM更新。所以不是新值而是重新初始化的新对象?与let行类似:网格[]=[];在getRows()中?