Как правильно / быстрее отрендерить большой список данных в Angular - PullRequest
Новая
       7

Как правильно / быстрее отрендерить большой список данных в Angular

0 голосов
/ 26 мая 2020

У меня очень длинный список данных. Я визуализирую это, как показано ниже. Для отображения компонента требуется около 4 секунд, и я бы хотел, чтобы он отображался мгновенно. Есть ли способ добиться этого? Я пробовал @ angular / cdk / scrolling , но не смог заставить компонент рендерить быстрее. 

<ng-container *ngFor="let stat of data;">
  <!-- TABLE-SECTION -->
  <div *ngIf="stat.type === 'TABLE-SECTION'" [ngStyle]="{backgroundColor: 'black'}" class="text-left headers-text">
    <!-- remove bg-color -->
    <h6 class="font-weight-bold" [ngStyle]="{color: stat.color}">{{stat.text}}</h6>
  </div>
  <!-- TABLE-HEAD -->
  <thead>
    <tr *ngIf="stat.type === 'TABLE-HEAD-SMALL'" [ngStyle]="{backgroundColor: 'black'}">
      <th *ngFor="let tableHead of stat.text; let index = index;" class="text-{{stat.align[index]}}" scope="col" [ngStyle]="{color: stat.color, textOverflow: 'unset'}" [innerHTML]="sanitizeHtml(tableHead)"></th>
    </tr>
  </thead>
  <!-- TABLE-LINE -->
  <tbody>
    <tr *ngIf="stat.type === 'TABLE-LINE'">
      <ng-container *ngFor="let tableRow of stat.text; let index = index;">
        <td *ngIf="tableRow" [ngStyle]="{color: stat.color, textOverflow: 'unset'}" class="smart-text text-{{stat.align[index]}}" [innerHTML]="sanitizeHtml(tableRow)"></td>
      </ng-container>
    </tr>
  </tbody>
  <!-- spacer -->
  <br *ngIf="stat.type === 'TABLE-SPACER'">
</ng-container>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
  <ng-container *ngFor="let stat of data.monthly;">
    <!-- TABLE-SECTION -->
    <div *ngIf="stat.type === 'TABLE-SECTION'" [ngStyle]="{backgroundColor: 'black'}" class="text-left headers-text">
      <!-- remove bg-color -->
      <h6 class="font-weight-bold" [ngStyle]="{color: stat.color}">{{stat.text}}</h6>
    </div>
    <!-- TABLE-HEAD -->
    <thead>
      <tr *ngIf="stat.type === 'TABLE-HEAD-SMALL'" [ngStyle]="{backgroundColor: 'black'}">
        <th *ngFor="let tableHead of stat.text; let index = index;" class="text-{{stat.align[index]}}" scope="col" [ngStyle]="{color: stat.color, textOverflow: 'unset'}" [innerHTML]="sanitizeHtml(tableHead)"></th>
      </tr>
    </thead>
    <!-- TABLE-LINE -->
    <tbody>
      <tr *ngIf="stat.type === 'TABLE-LINE'">
        <ng-container *ngFor="let tableRow of stat.text; let index = index;">
          <td *ngIf="tableRow" [ngStyle]="{color: stat.color, textOverflow: 'unset'}" class="smart-text text-{{stat.align[index]}}" [innerHTML]="sanitizeHtml(tableRow)"></td>
        </ng-container>
      </tr>
    </tbody>
    <!-- spacer -->
    <br *ngIf="stat.type === 'TABLE-SPACER'">
  </ng-container>
</div>
</div>
</ng-container>

1 Ответ

0 голосов
/ 26 мая 2020

Использовать виртуальную прокрутку:

<cdk-virtual-scroll-viewport> отображает большие списки элементов эффективно, визуализируя только те элементы, которые помещаются на экране.

Например: -

HTML: - 

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

CSS: - 

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

TS : - 

import {ChangeDetectionStrategy, Component} from '@angular/core';

/** @title Basic virtual scroll */
@Component({
  selector: 'cdk-virtual-scroll-overview-example',
  styleUrls: ['cdk-virtual-scroll-overview-example.css'],
  templateUrl: 'cdk-virtual-scroll-overview-example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollOverviewExample {
  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
}

Вот ссылка для справки: - https://material.angular.io/cdk/scrolling/overview

...