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

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

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

Answer 2

Делай так:

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

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

{{item?.name}}

Answer 3

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

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