如何使 PrimeNg VirtualScroller 响应高度？答案

【问题标题】：How to make PrimeNg VirtualScroller responsive height?如何使 PrimeNg VirtualScroller 响应高度？
【发布时间】：2020-07-23 07:42:41
【问题描述】：

我有一个primeng VirtualScroller，它有一个属性scrollHeight 可以固定一些高度。我试图将值设置为 100%，但它不接受。还尝试向组件添加样式或类以将高度设置为 100%，但也不起作用。如何使高度与浏览器窗口的高度相同？

<p-virtualScroller [value]="lazyCars" scrollHeight="40em" [itemSize]="150" [rows]="50" [cache]="false"
                   [lazy]="true" (onLazyLoad)="loadCarsLazy($event)" [totalRecords]="totalLazyCarsLength">
  <ng-template let-car pTemplate="item" let-i="index">
    <div class="ui-g car-item mt-1">
      <div class="ui-g-12 ui-md-2">
        <div class="ui-g-12 ui-md-12" style="font-size: 11px; text-align: center; padding-top: 18px">{{ generateDate() | date: 'dd/MM/yyyy' }}</div>
        <div class="ui-g-12 ui-md-12" style="font-size: 24px; text-align: center; padding-top: 18px">{{ generateDate() | date: 'HH:mm:ss' }}</div>
      </div>
      <div class="ui-g-12 ui-md-2" style="display: flex">
        <img class="rounded-image" src="../../assets/images/profileplaceholder.jpg" width="115" height="100" />
        <!--<i style="font-size: 5rem; align-self: center;" class="pi pi-users mx-auto"></i>-->
      </div>
      <div class="arrow-left"></div>
      <div class="ui-g-12 ui-md-5 chat-window">
        <div class="ui-g">
          <div class="ui-g-10 ui-sm-6">Autor: {{car?.autor}}</div>
          <h2 class="ui-g-10 ui-sm-6 ml-2">Evento: {{car?.evento}}</h2>
        </div>
      </div>
    </div>
  </ng-template>
  <ng-template let-car pTemplate="loadingItem">
    <div class="ui-g car-item empty-car-item">
      <div class="ui-g-12 ui-md-2">
        <div class="empty-car-item-index"></div>
      </div>
      <div class="ui-g-12 ui-md-2">
        <div class="empty-car-item-image"></div>
      </div>
      <div class="ui-g-12 ui-md-8">
        <div class="ui-g">
          <div class="ui-g-12"><div class="empty-car-item-text"></div></div>
          <div class="ui-g-12"><div class="empty-car-item-text"></div></div>
          <div class="ui-g-12"><div class="empty-car-item-text"></div></div>
          <div class="ui-g-12"><div class="empty-car-item-text"></div></div>
        </div>
      </div>
    </div>
  </ng-template>
</p-virtualScroller>

【问题讨论】：

标签： css angular layout primeng virtualscroll

【解决方案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;
}

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

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

完整代码和工作结果演示可在here 获得。

【讨论】：