angular cdk 虚拟视口设置动态高度 1.在您的组件中保留对 cdk-virtual-scroll-viewport 的引用2.根据列表中的元素个数计算列表容器height

如何解决angular cdk 虚拟视口设置动态高度 1.在您的组件中保留对 cdk-virtual-scroll-viewport 的引用2.根据列表中的元素个数计算列表容器height

使用cdk虚拟视口时，需要设置视口高度

.example-viewport {
  height: 800px;
  width: 100%;
  border: 1px solid black;
}
<cdk-virtual-scroll-viewport class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

但我希望 cdk-virtual-scroll-viewport 如果内容项未达到显示滚动条的最大高度，则将其包裹起来。但视口不适用于 max-height。

如果没有水平滚动条，则视口设​​置高度为最大高度就可以了。但在我当前的设计 UI 中，我需要显示水平滚动条，因为有很多内容列，如下图所示。

然后滚动条远低于视口的高度。行项目会随着时间增加，但在项目增加到最大高度之前，我希望水平滚动条包装到内容高度，但目前似乎无法实现。

我不使用 mat-table 的原因是我想支持无限滚动并呈现适合屏幕的项目。 Mat-table 不支持这个，如果我继续向下滚动并请求数据，模板中的行项目会增加并影响性能。

大家有更好的建议吗？

非常感谢。

解决方法

我得到了一个修复，它考虑了列表中元素的数量来设置容器高度。它计算容器的高度量，直到达到最终高度值。请按照以下步骤告诉我。

1.在您的组件中保留对 cdk-virtual-scroll-viewport 的引用

我们需要它能够稍后调用 checkViewportSize 并使 CdkVirtualScrollViewport 重新计算其内部大小。

组件

@ViewChild('scrollViewport')
private cdkVirtualScrollViewport;

模板

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

2.根据列表中的元素个数计算列表容器height

组件

calculateContainerHeight(): string {
  const numberOfItems = this.items.length;
  // This should be the height of your item in pixels
  const itemHeight = 20;
  // The final number of items you want to keep visible
  const visibleItems = 10;

  setTimeout(() => {
    // Makes CdkVirtualScrollViewport to refresh its internal size values after 
    // changing the container height. This should be delayed with a "setTimeout"
    // because we want it to be executed after the container has effectively 
    // changed its height. Another option would be a resize listener for the 
    // container and call this line there but it may requires a library to detect 
    // the resize event.

    this.cdkVirtualScrollViewport.checkViewportSize();
  },300);

  // It calculates the container height for the first items in the list
  // It means the container will expand until it reaches `200px` (20 * 10)
  // and will keep this size.
  if (numberOfItems <= visibleItems) {
    return `${itemHeight * numberOfItems}px`;
  }

  // This function is called from the template so it ensures the container will have 
  // the final height if number of items are greater than the value in "visibleItems".
  return `${itemHeight * visibleItems}px`;
}

模板

<div [style.height]="calculateContainerHeight()">
  <cdk-virtual-scroll-viewport class="example-viewport" #scrollViewport>
    <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
  </cdk-virtual-scroll-viewport>
</div>

应该是全部。您只需要根据您的情况调整函数中的 itemHeight 和 visibleItems 即可获得您期望的结果。