ngFor 的 Angular2 微调器

Question

我有一个 ngFor渲染了很多元素，我想在项目不仅加载而且渲染时显示一个微调器。

我知道在从服务器加载项目(即 observables)时如何显示微调器，但在我的情况下这只需要一点时间。我可以看到大部分时间都花在浏览器渲染所有 ngFor 上。元素，我不知道如何确保在此过程中仍显示微调器。我试过ngAfterViewChecked生命周期钩子(Hook)，但这也是在 ngFor 之前触发的完成。

所以我想知道有什么办法可以融入这个过程吗？或者我们可以强制 Angular2/浏览器显示 ngFor项目增量？ IE。在渲染时显示项目，而不是在创建模板后立即显示所有项目。

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

Answer 1

我真的，真的迟到了，在这里。在寻找其他东西时偶然发现了这个老问题。

问题在于(嗯，曾经)可能是因为没有 trackBy .这是一个经常被忽视的参数，但对于获得良好的性能至关重要ngFor s。

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