带有容器的Ionic 3和Virtual Scroll显示：flex

Question

我有一个容器，其中将显示一长串物品。它们应该是小盒子，但会有很多，例如“无穷大”。

我尝试了ngFor指令，并读到一些有关性能问题等的说法。因此Ionic拥有了这个虚拟滚动功能。但是我无法使其正常工作。

我的容器是这样的：

<div class="container" [virtualScroll]="collection">
    <div class="collection-item" *virtualItem="let item">
        {{item}}
    </div>
</div>

我的SCSS：

.container{
    display: flex;
    flex-wrap: wrap;
    height:100vh;
    justify-content: space-around;

    .collection-item{
        height: 15rem;
        margin-bottom: .5rem;
        width: 10.5rem;
    }
}

我的控制台显示以下消息：

Virtual Scroll: Please provide an "approxItemHeight" input to ensure proper virtual scroll rendering

进入页面后，该容器将被清除。不显示任何项目。当我开始“滚动”项目时，这些项目开始闪烁，然后被分组为以下图像。

任何人都可以向其他方向提供帮助或帮助。如果我使用ngFor，则列表运行良好。

虚拟滚动的工作原理

我希望它如何工作

工作方式（为更好的显示而加色）