如何正确/更快地在Angular中呈现大数据列表答案

【问题标题】：How to render big list of data in Angular properly/faster如何正确/更快地在Angular中呈现大数据列表
【发布时间】：2020-05-26 10:44:21
【问题描述】：

我有一个很长的数据列表。我正在渲染它，如下所示。显示组件大约需要 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>

【问题讨论】：

我们需要更多信息：数据从何而来？你的组件的生命周期钩子里面有什么？
我现在实际上正在使用模拟数据。这是链接pastebin.com/in4TpTvK。
我正在导入数据并在构造函数中赋值

标签： javascript angular angular8

【解决方案1】：

使用虚拟滚动：

<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

【讨论】：