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团队提供的Common Developpement Kit。

如果没有，请先安装CDK：

npm i @angular/cdk

安装后，您可以按照this guide进行简单的虚拟滚动。

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

Answer 2

使用trackBy改进索引，如下所示。这将提高性能，而仅重新渲染。

@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let item of collection;trackBy: trackByFn">{{item.id}}</li>
    </ul>
    <button (click)="getItems()">Refresh items</button>
  `,
})
export class App {

  constructor() {
    this.collection = [{id: 1}, {id: 2}, {id: 3}];
  }

  getItems() {
    this.collection = this.getItemsFromServer();
  }

  getItemsFromServer() {
    return [{id: 1}, {id: 2}, {id: 3}, {id: 4}];
  }

  trackByFn(index, item) {
    return index; // or item.id
  }
}

通过此链接获取更多信息。

https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

Answer 3

找到解决此情况的方法。角材料库的扩展面板。它提供了许多属性，只有在面板展开时，我才使用open属性来调用函数并获取该特定问题的选项。现在可以正常工作。

 <mat-accordion>

      <ion-card *ngFor="let q of questions | async">

          <mat-expansion-panel  (opened)="fetchAnswers(q)" >
              <mat-expansion-panel-header >
                  <mat-panel-description [innerHtml]="q.label">
                    </mat-panel-description>
              </mat-expansion-panel-header>

                <ion-item *ngFor="let a of answers | async">
                  <ion-icon slot="start" name="create"></ion-icon>
                  <ion-label>
                    <p>{{a.value}}</p>
                  </ion-label>
                </ion-item>

            </mat-expansion-panel>

      </ion-card>
</mat-accordion>

希望它可以帮助陷入类似情况的人。

注意：第一种方法注定会失败，因为在不久的将来，答案对象的数据将达到50,000，问题对象的数据将达到15,000。

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

3 个答案: