angular - 比较两个大对象的 Angular 会导致渲染速度变慢

Question

我有两个从 RTDB 获取的可观测值。一是问题(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 中的数据架构。我只需要处理这个。请提出一些提高性能的解决方案。

Answer 1

您可以使用Angular团队提供的通用开发工具包。

如果尚未安装 CDK，请先安装:

npm i @angular/cdk

安装后，您可以关注this guide实现一个简单的虚拟滚动。

这将仅渲染视口(viewport)中的项目，从而导致渲染速度更快。