Angular 8 - вложенный ng для крайне медленного

Question

Я пытаюсь отобразить 2-мерный массив с помощью 2-х вложенных ngFor

<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

Вы можете использовать следующую ленивую загрузку данных загрузки компонентов виртуального скроллера в пакетном режиме PrimeNG Virtual Scroller

Answer 2

Привет, вы всегда можете перезаписать trackBy в ng. Если ваша собственная реализация может повысить производительность,

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 может отслеживать, какие элементы были добавлены или удалены в соответствии с уникальным идентификатором, и создавать или уничтожать только те элементы, которые изменились.