Angular 8-嵌套ngFor非常慢

Question

我正在尝试通过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，但找不到关于如何在2d阵列上使用它的任何文档，仅在一个数据列表上。

我该怎么办？有任何想法吗？

Answer 1

您好，您始终可以覆盖ngBy的trackBy，因为提供您自己的实现可以提高性能，

1-在每个对象中为ID或Guid注入一个唯一的标识符

2-在您的teackBy方法中使用唯一标识符

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可以根据唯一标识符跟踪已添加或删除的项目，并仅创建或销毁已更改的项目。

Answer 2

您可以使用以下延迟加载虚拟滚动器组件批量加载数据PrimeNG Virtual Scroller