* ngFor对于Nativescript Angular中的列表稳定吗? [英] Is *ngFor stable for lists in Nativescript Angular?

问题描述

编辑:我问了一个有关RadList View当前状态是什么的相关问题(它是否已经存在?)

I have asked a related question about what the current state of RadList View is (does it exist anymore?) here.

原始问题: * ngFor可以用于Nativescript中的列表吗?

Original question: Is *ngFor ok to use for lists in Nativescript?

通常，我发现有人推荐RadListView，但是为了易于使用和能够自定义列表，我强烈建议使用* ngFor.但是，我最近在使用* ngFor时遇到了一些小问题，因此我想确保它在最新的Nativescript中是稳定的.

Normally, I find people recommending RadListView, but for ease of use and being able to customize the list, I strongly prefer *ngFor. However, I recently had a few glitches using *ngFor, so I want to be sure it is stable in the most recent Nativescript.

详细信息:

在使用Nativescript构建的iOS应用中，我有两个级别列表-带有类别的列表，然后是每个类别中的项目-

In my iOS app, built with Nativescript, I have a few two level lists--lists with categories and then items in each category--like:

-People
---Joe
---Suzy

-Animals
---Fito
---Spot

-Places
---Park
---Town

我最初尝试从Pro UI中使用RadListView构建这种类型，但是我发现构建一个两级列表过于繁琐.我需要能够以各种方式加载然后处理数据，而且RadListView似乎是为有限的自定义而设计的.

I originally tried to build this type of with RadListView from the Pro UI, but I found building a two level list overly cumbersome. I need to be able to load and then manipulate the data in various ways, and it seemed like RadListView was made for limited customizing.

讨论提到了分组功能"作为使用RadListView的方法，但这对于我拥有的数据类型来说是一种不灵活的方法.就灵活性和可定制性而言，使用基本的ListView甚至更糟.

This discussion mentions the "grouping function" as the way to do it with RadListView, but that was an inflexible approach for the type of data I have. Using basic ListView was even worse in terms of inflexibility and customizability.

所以我一直在使用基本的* ngFor，例如:

So I have been using basic *ngFor, like:

<StackLayout>
    <StackLayout *ngFor="let item of things">
        <Label text="{{item.type}}" (tap)="clickToShowEntries()"></Label>
        <StackLayout *ngFor="let entry of item.type" style="margin-left: 80px">
            <Label text="{{entry}}"></Label>
        </StackLayout>   
    </StackLayout>
</StackLayout> 

使用* ngFor代替RadListView是否存在问题?更新到最新的Nativescript和CLI后，我的应用程序上的列表似乎不稳定-几次测试某些类别时，它们彼此随机重叠，并且屏幕出现故障.我没有重现该错误，但是让我怀疑使用* ngFor是否存在问题.

Is there a problem using *ngFor instead of RadListView? After updating to the most recent Nativescript and CLI, the list on my app didn't seem as stable--a few times in testing some of the categories overlapped with each other randomly and the screen was glitchy. I have not reproduced that error, but it made me wonder whether there is a problem using *ngFor.

推荐答案

ListView和RadListView是使用本机方法处理列表的组件.两者都在使用回收和虚拟化(请检查此博客帖子以获取详细信息)，从而极大地提高了性能. ListView和RadListView都支持多个模板和自定义功能，甚至更多-它们与移动API保持一致，因为在幕后有创建这些组件的本机元素.

ListView and RadListView are components that are using the native approaches for handling lists. Both are using recycling and virtualization (check this blog post for details) which are greatly improving performance. Both ListView and RadListView are supporting multiple templates and customization and even more - they are aligned with the mobile APIs as behind the scenes there are native elements that are creating these components.

Angular的ngFor是一个结构指令，并未针对将要在移动设备上加载的大型列表进行优化.

The Angular's ngFor is a structural directive that is not optimized for large lists that will be loaded on a mobile device.

因此，简短的答案是仅将ngFor用于简短列表，将ListView/RadListView用于任何您可能认为繁重的内容.

So the short answer is to use ngFor only for short lists and ListView / RadListView for anything that you might consider heavy.

这篇关于* ngFor对于Nativescript Angular中的列表稳定吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！