我想在 TimeLine 视图中使用 cdk-virtual-scroll-viewport 来处理不同高度的项目。
所以设置itemSize="x"，根据文档是指列表中项目的大小（以像素为单位），是不切实际的。
autosize 尚不可用。
是否可以通过cdk-virtual-scroll-viewport 使用可变项目大小的虚拟/无限滚动？
更新
我一直在寻找替代的虚拟/无限滚动解决方案，但我几乎不敢相信，似乎没有解决方案适用于动态行高，即使使用https://github.com/rintoj/ngx-virtual-scroller 也不推荐。
2019 年 7 月更新 2
由于同时仍然没有解决方案，我相信解决此问题的“足够好”的方法是加载固定数量的项目，并在列表底部添加一个按钮以加载更多项目，例如本例：https://stackblitz.com/edit/ang-mat-load-more
【问题讨论】：
标签： angular angular7 virtualscroll
autosize 适合我。
尝试安装：
"@angular/cdk": "6.2.0",
"@angular/cdk-experimental": "6.2.0"
然后将 ScrollingModule 导入您的模块：
import {ScrollingModule} from "@angular/cdk-experimental";
imports: [ScrollingModule]
然后您可以使用 autosize 属性，如下所示：
<cdk-virtual-scroll-viewport autosize style="height: 100%">
【讨论】：
在 CDK 中提供此功能之前，我通过侦听本机元素的 onscroll 事件来绕过它，然后在滚动到底部的偏移量为 0 时做出响应
@ViewChild(CdkVirtualScrollViewport, { static: false })
public virtualScrollViewport?: CdkVirtualScrollViewport;
...
ngAfterViewInit() {
this.virtualScrollViewport.elementRef.nativeElement.onscroll = (e) => { this.onScroll(e) };
}
onScroll(e) {
var scrollOffset = this.virtualScrollViewport.measureScrollOffset("bottom");
if (scrollOffset == 0) {
this.fetchMoreData();
}
}
【讨论】：
这个 CSS 适合我。无需固定高度：
<cdk-virtual-scroll-viewport class="viewport">
.......
</cdk-virtual-scroll-viewport>
.viewport {
display: contents;
}
【讨论】：
itemSize="x" 无助于设置高度...您必须使用 CSS 自己指定任意高度。
关于您的问题，可变项目大小不应该是虚拟滚动的问题...您可以更改数组 in this example 以非常快速地查看可能性和结果。
【讨论】：
可以使用 [ngStyle] 动态设置 cdkvirtualscrollviewport 高度
<cdk-virtual-scroll-viewport
itemSize="parent?.children.length"
[ngStyle]="{'height.px': parent?.children.length<10? parent?.children.length*42 :250 }"
>
【讨论】：
parent? 到底是什么？和height.px ?