Angular Cdk虚拟滚动垫内选择垫选项

是否有人能够使用虚拟滚动内垫选择如下所示

{{state}}

---

正如您所见，它不起作用-滚动时会产生奇怪的空白。

虚拟滚动视口需要一个大小才能知道滚动容器必须有多大。这可以通过指定

的

[itemSize]

属性及其高度来实现

在您的示例中，一个

项目的高度为48px。如果要同时显示五个项目，则容器大小为5*48=240：

{{state}}

我想我已经解决了这个问题：

关键是当mat select打开面板时，我们触发cdkVirtualScrollViewPort滚动并检查视图端口大小

openChange（$event:boolean）{
log（“打开更改”，$event）；
如果（$事件）{
这个.cdkVirtualScrollViewPort.scrollToIndex（0）；
这个.cdkVirtualScrollViewPort.checkViewportSize（）；
}否则{
}
}

在这里，我们使用

@ViewChild

@ViewChild（CdkVirtualScrollViewport，{static:false}）
cdkVirtualScrollViewPort:cdkVirtualScrollViewPort；

模板中的其他相关部分非常简单：-

{{itemTrigger}}
{{item}}
只是一个提示

仍有空白。尝试向下滚动，关闭下拉列表，然后再次打开。你可以去打开和解决，但有一个固有的问题，因此该项目仍然是开放的。也许我们可以结合你的和我不明白。我的解决方案非常有效。正如@yusijs在本文中所述，itemSize属性是一个项目的高度（以像素为单位），而不是数组长度。我不会使用autosize，因为它还不稳定。请尝试以下（您的解决方案）步骤：1）打开下拉列表2）一直向下滚动3）关闭下拉列表4）打开下拉列表…我看到一个很大的空白下拉列表。你在看什么？是的，我看到了。一定是个bug——这肯定不是故意的。好的开始，不能正确处理键盘输入。。。i、 e.视口未滚动..是否滚动到当前活动项？查找索引并设置

this.cdkVirtualScrollViewPort.scrollToIndex（selectedIndex）在openChange中，而不是在代码段/中显示的0中，应该可以工作。