时间戳

首页 > 解决方案 > 使用 trackBy 仅在 ngFor 中对象的特定属性更改时渲染 DOM

angular - 使用 trackBy 仅在 ngFor 中对象的特定属性更改时渲染 DOM

问题描述

我正在尝试设置trackBy2 个迭代器，这 2 个之前曾导致加载问题，因为我在 ngFor 中ngFor有显着降低应用程序的速度。row.getRows()我对其进行了更改，因此仅在组件 init 中检索到的行并解决了问题，每次 ngFor 呈现时不再处理数组。

现在我需要更新一个isSelected在 mousemove 事件中频繁出现的单元格属性，它可能会导致同样的缓慢加载滞后效应。我认为只有在单个属性更改时才渲染 DOM 元素可以修复它，所以如果单元格的isSelected属性发生更改，我怎么能只渲染一个单元格/td？

<tr *ngFor="let row of rows">
  <td *ngFor="let cell of row.cells">
    {{cell.value}}
  </td>
</tr>

标签： angular

解决方案

Angular 足够聪明，只有在值发生变化时才更新 DOM。

也就是说，如果rows发生更改，<tr>则重新创建表中的每一个。如果row发生更改，<td>则该行中的每个都会更新。如果cell.value发生更改，则更新该单元格的单个文本节点。

（更改意味着oldValue != newValue. 即对象是通过身份进行比较的，而不是内容）

问题getRows()在于每次调用都getRows()可能返回一个新的 Array 对象。也就是说，rows总是在变化，这就是为什么 Angular 重新创建了整个表格。

长话短说：如果被迭代的数组发生变化，trackBy 很有帮助，但其中的对象保持相似。然后，trackBy 可以告诉 Angular 如何匹配旧对象和新对象，并重用旧的 DOM 节点，因此只有这些对象内的更改会导致 DOM 更新。

推荐阅读