我想在时间轴视图中使用 cdk-virtual-scroll-viewport 来显示高度不同的项目。
因此，设置 itemSize="x"，根据文档引用的是列表中项目的大小（以像素为单位），是不可行的。
autosize 目前还不可用。
是否可能使用具有可变项目大小的 cdk-virtual-scroll-viewport 进行虚拟/无尽滚动呢？
更新
我正在寻找替代的虚拟/无尽滚动解决方案，很难相信，似乎没有一种解决方案可以处理动态行高，即使使用https://github.com/rintoj/ngx-virtual-scroller也不建议这样做。
更新2，2019年7月
由于目前仍然没有解决方案，我认为"足够好"的解决方式是加载固定数量的项目，并在列表底部添加一个按钮来加载更多项目，就像这个例子: https://stackblitz.com/edit/ang-mat-load-more
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%">
最终，我找到了解决方案：
在我的情况中，我最近使用了@angular/cdk版本12.2.13，所以你也应该安装@angular/cdk-experimental，版本为12.2.13（相同版本）。
前往app.module.ts文件： 添加以下代码：
import { ScrollingModule as ExperimentalScrollingModule } from '@angular/cdk-experimental/scrolling';
import { ScrollingModule } from '@angular/cdk/scrolling';
在导入中：
[ScrollingModule,
ExperimentalScrollingModule]
<cdk-virtual-scroll-viewport
autosize
style="height: 100%"
class="container"
>
your content
</cdk-virtual-scroll-viewport>
它对我有效。
在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();
}
}
对我有效的唯一方法是使用 splaktar 在 stackblitz 上的示例。
模板：
<cdk-virtual-scroll-viewport [itemSize]="itemSize" class="example-
viewport">
<div *cdkVirtualFor="let item of items"
[style.height]="itemSize + 'px'">{{item}}</div>
</cdk-virtual-scroll-viewport>
<br>
<div>
<label for="height">Item Size:</label>
<input id="height" type="number" [(ngModel)]="itemSize">
</div>
组件：
import {ChangeDetectionStrategy, Component} from '@angular/core';
@Component({
selector: 'cdk-virtual-scroll-overview-example',
styleUrls: ['cdk-virtual-scroll-overview-example.css'],
templateUrl: 'cdk-virtual-scroll-overview-example.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollOverviewExample {
items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
itemSize = 80;
}
itemSize="x"并不能帮助设置高度...您需要使用CSS自己分配任意高度。
回到您的问题，虚拟滚动中的可变项大小不应该是一个问题...您可以更改此示例中的数组以快速查看可能性和结果。
这个CSS对我有效。不需要固定高度：
<cdk-virtual-scroll-viewport class="viewport">
.......
</cdk-virtual-scroll-viewport>
.viewport {
display: contents;
}
使用[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又是什么？ - Maurice