Question

我想在时间轴视图中使用javax.portlet.PortletException: Component with id::frmMain2:sub1:rep1:0:panel not found处理不同高度的项目。

因此根据文档说明，将Process[] processlist = Process.GetProcesses(); foreach (Process theprocess in processlist) { }设置为列表中项目的大小（以像素为单位） 是不切实际的。

cdk-virtual-scroll-viewport尚不可用。

是否可以在itemSize="x"项大小可变的情况下使用虚拟/无限滚动？

更新

我一直在寻找替代的虚拟/无限滚动解决方案，而且我几乎不敢相信，似乎没有 no 解决方案可用于动态行高，即使不使用https://github.com/rintoj/ngx-virtual-scroller，也不建议这样做

Answer 1

自动调整大小 对我有用。

尝试安装：

"@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%">

Answer 2

itemSize =“ x”并不能帮助您设置高度...您必须使用CSS自己指定一个高度。

参考： virtual scroll on Angular 7 - the height is zero by default

关于您的问题，可变项目大小对于虚拟滚动来说应该不是问题...您可以更改数组in this example以非常迅速地查看可能性和结果。

Answer 3

可以使用[ngStyle]动态设置cdkvirtualscrollviewport高度

          <cdk-virtual-scroll-viewport
        itemSize="parent?.children.length"
        [ngStyle]="{'height.px': parent?.children.length<10? parent?.children.length*42 :250 }"
      >

Answer 4

在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();
  }
}

Answer 5

此CSS对我有用。不需要固定高度：

<cdk-virtual-scroll-viewport class="viewport">  
   .......
</cdk-virtual-scroll-viewport>

.viewport { 
   display: contents;
}

具有可变项目高度的cdk-virtual-scroll-viewport

5 个答案: