时间戳

首页 > 解决方案 > 用于显示分层数据的嵌套 *ngFor 循环的性能问题

angular - 用于显示分层数据的嵌套 *ngFor 循环的性能问题

问题描述

我是 Angular 框架的新手，我遇到了用于显示分层数据的嵌套 *ngFor 循环的性能问题。

  1. *ngFor - 每个项目的 10 个项目（级别 1）扩展面板
  2. *ngFor 10 Items (Level 2) 网格列表显示内容
  3. *ngFor 5 Items (Level 3) 5 个按钮切换和 2 个选择控件

为避免加载所有数据，我将根据当前打开的 1 级面板设置 2nd *ngFor 的集合。

当我扩展面板或尝试按下按钮切换时，整个页面非常慢。注意：我不会使用这些操作更改集合。

为了调试，我在每个 ngFor 中放了一个函数来返回集合。我看到每次按下按钮切换时，angular 都会多次重做所有 *ngFor 指令中的所有迭代。

我不明白为什么每次更改控件时都需要进行所有迭代。在这种情况下如何提高性能？

在stackblitz上重现问题的代码示例！

标签： angularngforangular8

解决方案

您可以使用变量“index”提高性能，并且仅当该值是选定的accordeaon 时才使“content”可见

<!--I put the *ngFor in the own mat-expansion-panel-->
<mat-expansion-panel 
          *ngFor="let itemLevel1 of this.rootItem.children;let i=index"
          [expanded]="false" 
           <!--see that pass, itemLevel1 and "i"-->
          (opened)="onOpenLevel1Panel(itemLevel1,i)">
    <mat-expansion-panel-header>
      ...
    </mat-expansion-panel-header>   
    <ng-container *ngIf="i==index" >  
         <div *ngFor="let itemLevel2 of this.selectedItemChildren;">
            ....
         </div>
    </ng-container>
<mat-expansion-panel>

在 OpenLevel1Panel 中，我们使用变量 index

  index:number=-1;

  onOpenLevel1Panel(selectedItem: Item,index:number): void {
    this.selectedItemChildren = selectedItem.children;
    this.index=index;
  }

此外，我认为“选项”是应用程序变慢的真正原因

推荐阅读