角-重组分ngFor

Question

我遇到了一个问题:我有一个包含需要绘制的图表的数组。现在我所做的如下：

<ng-container *ngFor="let config of configs; trackBy: getId">
    <chart [config]="config"></chart>
</ng-container>


public getId(index, config): string {
    return config.id;
}

这些图表是相当沉重的渲染，所以当我需要绘制超过6-7个图表，用户界面开始冻结了很多。我正在考虑逐阶段绘制图表(在绘制前一张之前不要开始绘制下一张)。但我不太明白怎么做才是最好的。

我试着使用buffercount(1)，但没有得到我想要的。我也期待组件的动态呈现。有没有人对如何最好地做到这一点有任何想法？

Answer 1

您应该从使用the trackBy function指令时可以提供的ngFor开始。这将减少重新呈现chart组件的次数。

<ng-container *ngFor="let config of configs; trackBy: trackByFn">
    <chart [config]="config"></chart>
</ng-container>

trackByFn可以返回唯一的string，类似于id (如果您的配置对象有这样的东西)。如果您没有任何id，则可以返回属性的组合，这些属性在您拥有的集合元素中应该是唯一的：

trackByFn(index: number, config: any): string {
  return `${config.id}`;
  // or, when you don't have any id, a combination of properties
  // return `${config.type}_${config.value}`;
}

trackBy函数还接收index作为第一个参数，但不应该只使用index来跟踪项。