时间戳

首页 > 解决方案 > 比较两个大对象的角度会使渲染速度变慢

angular - 比较两个大对象的角度会使渲染速度变慢

问题描述

我有两个从 RTDB 获取的 observables。一个是问题（500 项），另一个是答案（2000 项）。

我正在使用嵌套 *ngFor 来比较和显示问题和相应的答案。它工作正常，但渲染缓慢并使整个应用程序滞后。

 <ion-slide *ngFor="let q of questions | async ">
      <ion-card>
        <ion-card-header>{{q.label}}</ion-card-header>
        <ion-card-content >
          <div *ngFor="let a of answers | async">
            <ion-item *ngIf="q.idWeb == a.question_id">
                <ion-label>{{a.value}}</ion-label>
                <ion-radio value="{{a.good}}"></ion-radio>
              </ion-item>
            </div>
        </ion-card-content>
      </ion-card>
    </ion-slide>

不幸的是，我无法更改 firebase 中的数据架构。我只需要处理这个。请提出一些解决方案来提高性能。

标签： angularionic4

解决方案

您可以使用 Angular 团队提供的 Common Developpement Kit。

如果您还没有安装 CDK，请先安装：

npm i @angular/cdk

安装后，您可以按照本指南实现简单的虚拟滚动。

这将仅渲染视口中的项目，从而加快渲染速度。

推荐阅读