ngFor的Angular2微调器

Question

我有ngFor很多要渲染的元素，我想显示一个微调器，不仅要加载项目，还要渲染项目。

我知道从服务器加载项目（即可观察对象）时如何显示微调框，但是就我而言，这只需要一点时间。我可以看到大部分时间都花在浏览器呈现所有ngFor元素上，而且我不知道如何确保在此过程中仍然显示微调框。我尝试了ngAfterViewChecked生命周期挂钩，但多数民众赞成在ngFor完成之前就触发了。

因此，我想知道是否有任何方法可以介入这个过程？或者，我们可以强制Angular2 /浏览器ngFor增量显示项目吗？即在渲染项目时显示项目，而不是在创建模板后一次显示所有项目。

我正在使用Angular 2.0.0。任何帮助表示赞赏。

Answer 1

我参加聚会真的真的迟到了。在搜索其他内容时偶然发现了这个老问题。

问题在于（好吧，曾经）可能是因为缺少trackBy. 这是一个经常被忽视的参数，但对于获得良好的性能至关重要ngFor。

trackBy 用于从传递给 的可枚举序列中的每个项目中提取唯一标识符ngFor：

<!-- trackById is a method in the component -->
<div *ngFor="let item of items; trackBy: trackById"></div>

// the signature of a trackBy method is fixed and as follows
trackById(index: number, item: any): any {
  // you can track by index, by item, by a property. In this sample we track the
  // items via an 'id' property
  return item.id;
}

如果没有trackBy函数，触发的每个更改检测都会破坏并重新创建整个列表。ngFor因此，如果您几乎同时有许多可观察的触发，则每个可观察的触发都会重新创建一次整体。
设置 trackBy 后，在每次更改检测时，ngFor指令不会销毁并重新创建所有内容，而只会更新已更改的项目，删除必须删除的项目并插入新项目。

一篇很好的文章描述了一些用例： https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

API参考文档： https://angular.io/api/common/NgForOf