Является ли * ngFor стабильным для списков в Nativescript Angular?

Question

Редактировать: Я задал связанный вопрос о том, каково текущее состояние представления RadList (существует ли оно больше?) здесь .

Оригинальный вопрос: Можно ли использовать * ng для списков в Nativescript?

Обычно я нахожу людей, рекомендующих RadListView, но для простоты использования и возможности настройки списка я настоятельно предпочитаю * ngFor.Однако недавно у меня было несколько глюков, использующих * ngFor, поэтому я хочу быть уверенным, что он стабилен в самом последнем Nativescript.

Подробности:

В моем iOS-приложении, построенном с Nativescript,У меня есть несколько двухуровневых списков - списки с категориями, а затем элементы в каждой категории, например:

-People
---Joe
---Suzy

-Animals
---Fito
---Spot

-Places
---Park
---Town

Изначально я пытался создать этот тип с помощью RadListView из пользовательского интерфейса Pro, но нашелдвухуровневый список слишком громоздок.Мне нужно иметь возможность загружать и затем манипулировать данными различными способами, и казалось, что RadListView был сделан для ограниченной настройки.

В этом обсуждении упоминается "функция группировки" как способ сделать это с 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

Я оставлю ответ @Nick Lliev в качестве принятого ответа, но я хотел отметить: я обнаружил, почему * ngFor выглядел «глючным» для iOS после обновления до Nativescript 5.0+.В Nativescript 5.0+ похоже, что команда внесла некоторые изменения, чтобы улучшить работу Nativescript для безопасной области iOS.Это повлияло на стиль / форматирование таких элементов, как * ngFor.

В моем случае, после ugprade, списки * ngFor, которые раньше работали безупречно, начали делать глючные вещи, такие как случайный большой пробел на экране и перекрытие записей.

Мне удалось исправить это, добавив iosOverflowSafeArea="false" в качестве заголовка в мой HTML (например, <StackLayout iosOverflowSafeArea="false" ...).С этим изменением мои списки * ngFor, похоже, вернулись в норму.

Фактически, при тестировании на моем устройстве мой список * ngFor работает лучше, чем мои списки RadListView с функцией группировки.Списки * ngFor идеально гладкие, в то время как списки RadListView немного дергались при прокрутке.Оба списка имеют одинаковое количество данных - около 40 записей.Кто-нибудь знает, почему * ngFor может прокручиваться более плавно, чем RadListView?

Answer 2

ListView и RadListView - это компоненты, которые используют собственные подходы для обработки списков.Оба используют вторичную переработку и виртуализацию (подробнее см. в этом блоге ), что значительно повышает производительность.И ListView, и RadListView поддерживают несколько шаблонов и настроек, и даже больше - они выровнены с мобильными API, поскольку за кулисами есть собственные элементы, которые создают эти компоненты.

Angular's ngFor является структурной директивойэто не оптимизировано для больших списков, которые будут загружены на мобильном устройстве.

Таким образом, короткий ответ - использовать ngFor только для коротких списков и ListView / RadListView для всего, что вы считаете тяжелым.