виртуальный свиток, возвращающий пустой массив

Question

HTML:

<virtual-scroll [items]="items" (update)="viewPortItems = $event">    
                <div *ngFor="let item of viewPortItems">
                  {{item.name}}
                </div>                    
</virtual-scroll>

В компоненте я инициализирую элементы.Компонент:

items = [{
        name: 'xyz'
    },
    {
        name: 'xyz'
    },
    {
        name: 'xyz'
    },
    {
        name: 'xyz'
    }
]

Но на моей странице ничего не отображается.viewPortItems пуст.

Answer 1

Полагаю, вы не определяете размер контейнера виртуальной прокрутки.Любая из реализаций виртуальной прокрутки не работает, если контейнер каким-то образом не имеет размера, добавьте style = 'height: 300px' и посмотрите, работает ли он.

См. https://medium.com/@andrew_54539/virtualization-of-ngfor-welcome-to-the-pure-ngfor-replacement-ngvfor-21254034acbc?source=linkShare-40e7ef73f7e0-1535661741

Answer 2

У меня была такая же проблема, в моем случае я решил ее, но настроил высоту элемента virtual-scroll.Вы всегда можете отладить такое поведение на вкладке элемента => настроить стиль элемента.

Answer 3

сделать так:

<div *ngFor="let item of viewPortItems" [item]="item">

и внести небольшое изменение:

{{item?.name}}