angular - 虚拟滚动返回空数组

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

我有同样的问题，在我的情况下我解决了它，但调整了虚拟滚动元素的高度。您始终可以在元素选项卡中调试这种行为 => 调整元素样式。

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