2

我正在尝试通过 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 但我找不到任何关于如何在二维数组上使用它的文档，只能在一个数据列表中找到。

我能做些什么？有任何想法吗？

4

2 回答 2

0

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

于 2020-02-10T15:43:10.837 回答
0

嗨，您始终可以覆盖 ngFor 的 trackBy 提供您自己的实现可以加快性能，

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

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

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

于 2020-02-07T15:16:57.630 回答