Angular 使用ngFor和选项卡呈现复杂列表

我想知道如何快速显示我正在使用的复杂元素的列表。 我有一个实体列表，每个实体都有20个属性，我正在创建一个列表，其中可能使用了每个属性的一半：

  <ion-card *ngFor="let item of getCurrentList()" class="fadeIn">
        <ion-item-sliding>
            <ion-item button no-padding lines="none" (click)="showDetail(item.id)">
                <ion-thumbnail slot="start" class="collectionThumb">
                    <img-loader class="gameImg" [src]="item.image.S80"></img-loader>
                </ion-thumbnail>
                <ion-label>
                    <h2 text-wrap>{{item.title}} ({{item.edition}})</h2>
                    <progress-bar [progress]="getFloatNote(item.rating)"></progress-bar>
                    <ion-chip color="primary">
                        <ion-icon name="people"></ion-icon>
                        <ion-label>{{item.players_min}} - {{item.players_max}}</ion-label>
                    </ion-chip>
                    <ion-chip color="primary">
                        <ion-icon src="../assets/icon/cake.svg"></ion-icon>
                        <ion-label>{{item.age_min}}+</ion-label>
                    </ion-chip>
                    <ion-chip color="primary">
                        <ion-icon name="time"></ion-icon>
                        <ion-label>{{item.duration}}'</ion-label>
                    </ion-chip>
                </ion-label>
            </ion-item>
            <ion-item-options *ngIf="currentTab == 'collection'">
                <ion-item-option (click)="deleteItem(item)" color="danger">
                    <ion-icon slot="icon-only" name="trash"></ion-icon>
                </ion-item-option>

                <ion-item-option (click)="editNoteModal(item)" color="secondary">
                    <ion-icon slot="icon-only" name="create"></ion-icon>
                </ion-item-option>
                <ion-item-option (click)="addPlayModal(item)" color="tertiary">
                    <ion-icon slot="icon-only" src="../assets/icon/dice.svg"></ion-icon>
                </ion-item-option>
    </ion-item-options>
        </ion-item-sliding>
    </ion-card>

{{item.title}}（{{item.edition}}）
{{item.players_min}-{{item.players_max}
{{item.age_min}+
{{item.duration}}'

我有两个不同的列表，没有重叠的元素，将使用同一模板显示，我使用选项卡在它们之间切换（集合愿望列表） 当我在选项卡上单击时，change事件修改“currentTab”属性，Angular magic将使用“getCurrentList（）”获取新列表

收集
{{boardGames.filteredCollection.length}
愿望者
{{boardGames.filteredWishList.length}
public getCurrentList（）：BoardGame[]{
if（this.currentTab=='collection'）{
返回此.boardGames.filteredCollection；
}否则{
返回此.boardGames.filteredWishList；
}
}

所以，所有这些在多达40个元素的情况下都运行得很好，但在这之后，它开始变得古怪。 首先，选项卡上的涟漪效应看起来有问题，几秒钟后就会触发，当列表变成大约100个元素时会延迟，随着数字的增加，效果会越来越差。 我有相同元素的另一个视图，但只有图像和标题，显示速度更快

我试图为每个按钮上的单个

（单击）

更改

上的事件，但没有更改显示问题

正如你所看到的，我使用的是离子框架，但我认为这不是问题所在

我想知道的是：

• 我试图建立的列表是否太复杂而无法平滑
• 将
  作为一个组件会提高性能吗
• 我是否以一种糟糕的方式交换了这两个列表
• 有没有办法确保首先渲染涟漪效果，然后 列表的计算将在之后进行：我可以添加一个 内容中的微调器，即使需要一些时间，看起来也可以
• 如果我创造了一种可以观察到的 这些元素是循序渐进的吗

我很开明，请帮帮我

---

谢谢。

好的，在进一步挖掘之后，ionic framework提供了这个问题的现成答案：

它只需处理足够元素的渲染，以填充给定元素数组的视图。因此，无论列表的长度有多长都不重要，性能现在非常好

---

无论如何，我想对列表交换方法和组件解决方案有一个看法，这会提高性能吗？

好的，所以在进一步挖掘之后，ionic framework提供了现成的答案：

它只需处理足够元素的渲染，以填充给定元素数组的视图。因此，无论列表的长度有多长都不重要，性能现在非常好

无论如何，我想对列表交换方法和组件解决方案有一个看法，这会提高性能吗

 <ion-segment color="primary" (ionChange)="switchList($event)">
        <ion-segment-button checked value="collection" class="segmentButton">
            <ion-label>Collection
                <ion-badge color="medium">{{boardGames.filteredCollection.length}}</ion-badge>
            </ion-label>
        </ion-segment-button>
        <ion-segment-button value="wishlist" class="segmentButton">
            <ion-label>Wishlist
                <ion-badge color="medium">{{boardGames.filteredWishList.length}}</ion-badge>
            </ion-label>
        </ion-segment-button>


 public getCurrentList(): BoardGame[] {
    if (this.currentTab == 'collection') {
      return this.boardGames.filteredCollection;
    } else {
      return this.boardGames.filteredWishList;
    }
  }