使用 ngFor 和选项卡进行复杂列表渲染答案

【问题标题】：Complex list rendering with ngFor and tabs使用 ngFor 和选项卡进行复杂列表渲染
【发布时间】：2019-02-21 11:09:16
【问题描述】：

我想知道如何快速显示我正在使用的复杂元素的列表。我有一个实体列表，每个实体都有 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>

我有 2 个没有重叠元素的不同列表，它们将使用相同的模板显示，我使用选项卡在它们之间切换（收藏愿望清单）当我单击选项卡时，更改事件会修改“currentTab”属性，Angular 魔术会使用“getCurrentList()”获取新列表

 <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;
    }
  }

所以，所有这些在多达 40 个元素的情况下都可以正常工作，但超过了它就开始变得暴躁。首先，选项卡上的涟漪效果看起来有问题，效果会在几秒钟后触发，当列表变成大约 100 个元素时会滞后，并且随着数字的增加，效果会变得越来越差。我对相同元素有另一个视图，但只有图像和标题，显示速度要快得多。

我尝试为每个按钮上的单个(click) 更改<ion-segment> 上的事件，但没有更改显示问题。

如您所见，我正在使用 ionic 框架，但我认为这不是问题所在。

我想知道的是：

我正在尝试构建的列表是否过于复杂而无法顺利进行？
将<ion-card> 设为组件会提高性能吗？
我是否以一种糟糕的方式交换了两个列表？？
有没有办法确保首先渲染波纹效果，然后列表的计算将在之后发生：我可以添加一个内容中的微调器，即使需要一些时间看起来也不错
如果我创建一种可以发送的 observable 会更好吗？逐步列出元素？

我心胸开阔，请帮忙！！

谢谢。

【问题讨论】：

标签： angular ionic-framework ngfor

【解决方案1】：

好的，在深入挖掘之后，离子框架提供了现成的答案：<ion-virtual-scroll>Ionic Doc

它只是处理足够的元素的渲染来填充给定元素数组的视图。因此，无论列表的长度有多重要，性能现在都很棒！

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

【讨论】：