*ngFor trackBy 多个属性答案

【问题标题】：*ngFor trackBy multiple properties*ngFor trackBy 多个属性
【发布时间】：2017-12-02 09:33:57
【问题描述】：

我有一个*ngFor 指令用于array 的对象，这些对象有很多属性。

我希望这个*ngFor 仅在其中三个属性发生更改时更新，但根据 TrackByFunction 上的documentation，没有有效的示例说明如何实现。

我尝试返回一个包含属性的对象，但它似乎不起作用，因为当任何其他属性发生更改时，模板仍会再次呈现。

【问题讨论】：

过早优化是万恶之源仅在渲染缓慢时进行优化。
@G.Vitelli 我正在优化，因为它很慢，因为数组可能很大并且我无法添加分页，所以我必须通过删除来优化节点删除/创建不需要时进行此类操作。

标签： angular

【解决方案1】：

我知道这很旧，但我认为问题是您如何处理对跟踪比较器的响应。在您的示例中，您回复另一个对象，与另一个对象相比，该对象总是返回不同。

因此，每次创建对象{a: "ehhhh", b:"bee", c:"cee"} 时，因为它具有有限的一组属性，然后将其与另一个对象进行比较，即使属性值相同它们不是同一个对象。

如果您返回JSON.stringify(trackedObj)，则比较的两个字符串可以返回正确触发更改检测所需的布尔值。但在那一点上，我想知道字符串转换比标准改进了多少，除了它允许未更改的项目不会从 dom 中删除。有趣的想法...

另一个 SO 中的更多细节：https://stackoverflow.com/a/1144249/1251604

【讨论】：

几个月前我自己想出了这个，但这完全是你所说的，所以我会接受那些将使用谷歌来到这里的人的答案，所以他们知道真正的答案。跨度>

【解决方案2】：

尝试将 [ngForTrackBy]="trackSelectionsBy" 添加到您的元素中，您的 trackSelectionsBy 方法应如下所示：

public trackSelectionsBy(index: number, myObject: MyObject): any {
    return myObject.id + myObject.count + myObject.startTime;
}

并添加您自己的属性以进行跟踪。

【讨论】：

【解决方案3】：

我有一个非常相似的情况，数组非常大，无法添加分页，找不到任何解决方案来使用 trackByFn 的多个属性，我有三个属性和四个不同的场景可以改变它们。我在我的对象中使用一个名为uniquefier（一个UUID）的附加属性解决了这个特殊问题，然后当三个属性中的任何一个或四个不同场景发生时，我用一个新的UUID 进行了更新。然后我将此属性添加到我的trackByFn。希望这会有所帮助。

【讨论】：