Angular 8 - 嵌套的 ngFor 非常慢答案

【问题标题】：Angular 8 - nested ngFor is extremely slowAngular 8 - 嵌套的 ngFor 非常慢
【发布时间】：2020-02-07 15:11:02
【问题描述】：

我正在尝试通过 2 个嵌套的 ngFor 显示 2d 数组

<div class="row" *ngIf="!calculating" style="margin: auto;">
    <div class="col-xs-12 col-sm-12 col-md-12 col-sm-offset-1 col-md-offset-2">
      <div class="row" *ngFor="let pixelRow of pixels" style="width: max-content;">
        <div class="col pixel" 
        *ngFor="let pixel of pixelRow"  
        [ngStyle]="{'background-color': pixel.Color }"
        (click)="changePixelState(pixel.xIndex, pixel.yIndex)"></div>
      </div>
    </div>
  </div>

基本上它在正常的数据规模上工作正常，但是当它被定义为 1000X1000 时 - 显示需要大量时间，同时页面没有响应。我曾尝试使用 cdk-virtual-scroll-viewport 但我找不到任何关于如何在二维数组上使用它的文档，只能在一个数据列表中。

我能做什么？有什么想法吗？

【问题讨论】：

What can I do? any Ideas? ← 限制您的数据。您可以添加分页（或滚动），然后只加载一页数据。这是处理/显示更大数据集的非常正常的机制。没有人可以在任何给定时间“消耗”1000x1000 的数据，因此应用程序没有必要显示这些数据。
好吧，我必须同意您的观点，即没有人可以同时使用这么多数据。分页是个好主意。谢谢。

标签： angular performance multidimensional-array ngfor

【解决方案1】：

您好，您可以随时覆盖 ngFor 的 trackBy，提供您自己的实现可以提高性能，

1- 在您的每个对象中注入一个唯一标识符，一个 Id 或 Guid

2- 在你的 teakBy 方法中使用唯一标识符

3- 在你的模板 html 中绑定 trackBy 方法

<ul>
  <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
</ul>

4- 在你的 ts 文件中

trackByFn(index, item) {
   return item.id;}

现在，当您更改集合时，Angular 可以根据唯一标识符跟踪已添加或删除的项目，并仅创建或销毁已更改的项目。

【讨论】：

这对初始渲染性能没有任何影响。
是的，你是对的，我必须同意你在一个页面中显示一百万条记录，没有人这样实现它，延迟加载甚至简单的分页都会提高性能，但如果有人决定显示每页 1K，仍然跟踪将有助于页面响应
不，不会。 trackBy 在重新渲染项目时很有帮助，但在初始渲染期间没有任何区别。

【解决方案2】：

可以使用下面的懒加载虚拟滚动条组件批量加载数据 PrimeNG Virtual Scroller

【讨论】：