Мне интересно, как быстро отобразить список сложных элементов, с которыми я работаю.У меня есть список сущностей с 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 magic получает новый список с помощью «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 элементов, и становится все хуже и хуже с увеличением числа.У меня есть другой вид тех же элементов, но только с изображением и заголовком, который отображается намного быстрее.
Я пытался изменить событие на <ion-segment> для отдельного (click) на каждой кнопке,но проблема с дисплеем не изменилась.
Как вы можете видеть, я использую ионный каркас, но я не думаю, что это проблема здесь.
Что я хотел бы знатьis:
- Является ли список, который я пытаюсь построить, слишком сложным, чтобы его можно было сгладить?
- Повысит ли
<ion-card> компонент производительность? - Я ужасно меняю два списка ??
- Есть ли способ убедиться, что сначала создается эффект ряби, а потом вычисление списка произойдет: я мог бы добавить спиннер в контенти это выглядело бы хорошо, даже если бы это заняло некоторое время
- Было бы лучше, если бы я создал вид наблюдаемого, который бы постепенно отправлял элементы списков?
Ну, я открыт.Пожалуйста, помогите !!
Спасибо.