Question

我有一个Primeng VirtualScroller，它具有一个固定一些高度的属性scrollHeight。我试图将价值设置为100％，但它不接受。还尝试将样式或类添加到组件以将高度设置为100％，但也无法正常工作。如何使高度与浏览器窗口的高度相同？

just (suc (suc (suc (suc zero))))

Answer 1

这可以使用嵌套的弹性框来完成。我已经在a different question中解释了它们如何与Angular一起使用。为该问题应用该解决方案涉及将flexbox-middle类的等效项应用于组成虚拟滚动区域的每个元素：

p-virtualScroller, 
/deep/ .ui-virtualscroller, 
/deep/ .ui-virtualscroller-content, 
/deep/ .ui-virtualscroller-list, 
/deep/ cdk-virtual-scroll-viewport {
  display        : flex;
  flex           : 1;
  flex-direction : column;
}

采用这种样式后，scrollHeight元素的p-virtualScroller属性将不再设置，因为该组件将弯曲到父元素的高度：

<p-virtualScroller [itemSize]="50" [value]="items">
  <ng-template pTemplate="item" let-obj>
    {{ obj.name }}
  </ng-template>
</p-virtualScroller>

here提供了完整的代码和工作结果的演示。

如何使PrimeNg VirtualScroller响应高度？

1 个答案: