Angular：* ngFor trackby Date

Question

我的问题是，我正在迭代Angular模板中的一系列日期。日期的引用每次都会更改，因此视图会重新绘制减慢应用程序速度的内容。我的想法是，做一个＆＃34; trackby＆＃34;使用Date.getTime（），但这不能正常工作。 DOM-Elements已重新创建。这使得网站非常慢。

以下是代码示例：

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

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

有谁知道如何避免重绘DIV-Elements？

Answer 1

带有*ngFor的

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

因此，如果您的项目不断更改，那么它不会帮助您，所以请检查您的项目不修改并保持对象标识而不是像时间一样的变量值。

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

示例：

你需要有下面的代码，其中有标识符的项目，跟踪项目，主要是当你添加项目或修改项目然后trackby functioon将进入图片并通过其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;
  }