角度：*ngFor trackby 日期答案

【问题标题】：Angular: *ngFor trackby Date角度：*ngFor trackby 日期
【发布时间】：2018-06-15 05:49:42
【问题描述】：

我的问题是，我正在迭代 Angular 模板中的日期数组。 Dates 的引用每次都会更改，因此视图正在重绘减慢应用程序的内容。我的想法是，用 Date.getTime() 做一个“trackby”，但这不能正常工作。 DOM 元素已重新创建。这使得网站非常缓慢。

代码示例如下：

<div *ngFor ="let month of (months$ | async); trackBy: trackByMonth">
... 
</div>

trackByMonth(index, item) {
    return item.getTime();
}

有人知道如何避免重绘 DIV 元素吗？

【问题讨论】：

(months$ | async) 意味着您每次都从可观察的大部分 http 获取数据，对吗？
我从一个ngrx-store选择器得到它
在 trackby ngFor 基于身份刷新项目的情况下，如果你有 getTime() 这可能会导致问题，你为什么不尝试这样 trackByMonth(index, item) { return index; } 返回索引而不是时间
@Pranay Rana，是的，我删除了我的“愚蠢”评论
我尝试使用索引，但这也不起作用。此外，索引并没有真正识别对象，因为月份可能会发生变化（例如，从 5 月开始而不是 1 月开始）。如果我正确理解trackby，必须返回对象的唯一标识符？

标签： angular ngfor

【解决方案1】：

*ngFor 和 trackby，仅在数组中的项目被更改或添加或删除时刷新或添加项目，它不基于作为输入提供的 trackBy 函数，

因此，如果您的项目不断变化，那么它对您没有帮助，所以请检查您的项目没有修改并保留对象标识而不是变量值（如时间）。

要了解更多信息，您可以使用开发人员工具，在每次修改 dom 后，您的 dom 元素都会突出显示。

例子：

您需要有如下代码，其中项目具有标识符，以跟踪项目，并且大多数情况下，当您添加项目或修改项目时，trackby 功能将出现在图片中并通过其 id 值识别每个对象

 episodes = [
    { title: 'Winter Is Coming', director: 'Tim Van Patten', id: 0 },
    { title: 'The Kingsroad', director: 'Tim Van Patten', id: 1 },
  ];

  *ngFor="let episode of episodes;trackBy: trackById"

    trackById(index: number, episode: any): number {
    return episode.id;
  }

【讨论】：

实际上不可能保留对象身份。如果没有 trackBy，项目将按身份进行跟踪。所以我虽然使用 trackBy 我可以改变这种行为，但这些项目是由另一个唯一标识符跟踪的？就我而言，日期...
@Flash91 - 如果你认为那将保持不变，那没关系，但如果你的 boject 属性不断变化，那么你的 dom 元素 ger 刷新了..检查开发工具，以验证