Question

编辑：我问了一个有关RadList视图当前状态的相关问题（它是否已经存在？）here。

原始问题： * ngFor是否可以用于Nativescript中的列表？

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

详细信息：

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

-People
---Joe
---Suzy

-Animals
---Fito
---Spot

-Places
---Park
---Town

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

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

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

<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是否存在问题。

Answer 1

ListView和RadListView是使用本机方法处理列表的组件。两者都在使用回收和虚拟化（有关详细信息，请查看this blog post），它们可以极大地提高性能。 ListView和RadListView都支持多种模板和自定义功能，甚至更多-它们与移动API保持一致，因为在幕后有创建这些组件的本机元素。

Angular的SELECT * from `bigquery-public-data.noaa_gsod.gsod*` WHERE _TABLE_SUFFIX >'2015'是一种结构指令，并未针对要在移动设备上加载的大型列表进行优化。

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

Answer 2

我将保留@Nick Lliev的答案作为接受的答案，但我想指出：我发现* ngFor为何在升级到Nativescript 5.0+后对于iOS显得“笨拙”。在Nativescript 5.0+中，团队似乎进行了一些更改，以使Nativescript在iOS的安全区域更好地工作。这影响了* ngFor之类的项目的样式/格式。

以我为例，在执行ugprade之后，曾经工作得很好的* ngFor列表开始执行错误的操作，例如在屏幕上具有随机的大空白，并且条目重叠。

我可以通过在HTML中添加iosOverflowSafeArea="false"作为标头来更正此错误（例如<StackLayout iosOverflowSafeArea="false" ...）。进行此更改后，我的* ngFor列表似乎恢复了正常。

实际上，在我的设备上进行测试时，我的* ngFor列表比具有分组功能的RadListView列表更好。 * ngFor列表非常平滑，而RadListView列表在滚动时有点生涩。两个列表的数据量相同-大约40个条目。谁知道* ngFor为什么实际上比RadListView滚动更平滑？

* ngFor对于Nativescript Angular中的列表稳定吗？

2 个答案: