NativeScript Angular RadListView呈现速度极慢

Question

问题：

我有一个angular-nativescript应用程序，需要在网格中显示一些项目。我正在使用RadListView来呈现列表，并且在过去几个月升级我的角度，{N}和其他库依赖项后，我注意到RadListView渲染的项目已经变得无法忍受。我有多个“标签”，因此您可以看到不同类型的项目，每当您切换“标签”时，它需要使用新的时间完全重新呈现列表。在进行一些升级之前（我曾希望这会提高应用程序性能）切换选项卡即使对于渲染100多个项目也没有明显的延迟。现在需要几秒钟来加载甚至24（我在滚动时切换到动态渲染以加快速度，但它还不够好）。

平台信息：

• ios（tns ios 5.2.0,5.3.1）[Angular 7]
• nativescript-ui-listview：6.1.0
• nativescript-ui-core：2.0.1
• nativescript-ui-sidedrawer：6.0.0
• CLI：5.3.1
• 跨平台模块：5.3.1
• 运行时间：tns-ios 5.3.1

该问题似乎与在RadListView中具有一些嵌套结构有关。我的原始代码（由于在{N}，Angular，nativescript-ui的旧版本上执行得很好，因此运行时保持不变：

<RadListView id="itemList" top="0" left="0" [items]="displayedInventory" separatorColor="white" [loadOnDemandMode]="loadOnDemandMode"
    (loadMoreDataRequested)="onLoadMoreItemsRequested($event)" class="gridview-wrap-tabs" dock="top" [ngClass]="{'gridview-wrap-tabs': (posLocation && posLocation.tabs)}">
    <ListViewStaggeredLayout tkListViewLayout scrollDirection="Vertical" spanCount="4" itemHeight="180" horizontalAlignment="left"
        class="inventory-list-view-inner" separatorColor="black">
    </ListViewStaggeredLayout>
    <ng-template tkListItemTemplate let-item="item">
        <StackLayout class="inventory-stack-wrap">
            <GridLayout rows="auto, *, auto" columns="auto, auto" orientation="horizontal" class="outerBox" stretchLastChild="true" (tap)="addToCart(item, true)"
                [ngClass]="{ 'portraitBox': orientation==='portrait' , 'selected-inventory-item': item.isSelected, 'empty-inventory-item': item.price < 0}">
                <Label row="0" col="0" *ngIf="item.type==='category'" height="40px" class="price-label-category" [ngClass]="{ 'portrait-category-label': orientation==='portrait' }"
                    text="Category"></Label>
                <Label row="1" col="0" verticalAlignment="top" [text]="item.name" *ngIf="item.type==='category'" class="name-label" textWrap="true"
                    [ngClass]="{ 'portrait-name-label': orientation==='portrait' }"></Label>

                <Label row="0" col="0" verticalAlignment="top" [text]="item.name" *ngIf="item.name && item.name.length <=2 0 && item.type !=='category'"
                    class="name-label" textWrap="true" [ngClass]="{ 'portrait-name-label': orientation==='portrait' }"></Label>
                <Label row="0" col="0" verticalAlignment="top" [text]="item.name.slice(0,20) + '...'" *ngIf="item.name
                    && item.name.length> 20 && item.type !== 'category'" class="name-label" textWrap="true" [ngClass]="{'portrait-name-label': orientation
                    === 'portrait'}"></Label>

                <GridLayout col="0" colSpan="2" row="1" rowSpan="2" width="100%" *ngIf="item.imageSource">
                    <Image class="inventory-image" [ngClass]="{'portrait-inventory-image': orientation==='portrait'}" [src]="item.imageSource"></Image>
                </GridLayout>
                <GridLayout width="100%" *ngIf="item.type !=='category'" row="2" col="0" colSpan="2" columns="auto, *, 10" rows="auto">
                    <Label col="1" row="0" horizontalAlignment="right" height="40px" class="price-label" [ngClass]="{ 'portrait-price-label': orientation==='portrait' }"
                        text="${{item.price | number: '1.2-2'}}"></Label>
                </GridLayout>
            </GridLayout>
        </StackLayout>
    </ng-template>
</RadListView>

作为验证RadListView渲染速度慢的概念的证明，我尝试使用只有一个标签，其中嵌入了项目的名称，渲染几乎是即时的 - 所以它似乎是一个问题RadListView如何渲染子类，如StackLayout，GridLayout。我还尝试用DockLayout替换GridLayout并删除所有角度* ngIfs和* ngClasses（并删除了Image标签）以查看是否会提高性能但它似乎没有任何效果。加载仅24件物品仍然非常缓慢。 （对于较少的项目，加载确实显着增加 - 但我最初不能显示少于24个）

有任何想法吗？我宁愿不必降级我的angular和nativescript依赖项

Answer 1

通过使用ListViewStaggeredLayout切换到ListViewGridLayout，我能够显着改善加载时间。早期版本的{N}和角度问题并不存在，所以它看起来像是在某个地方的更新导致它滞后。