虚拟滚动返回空数组

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元素的高度。您总是可以在element选项卡中调试这种行为，=>调整element style。

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