Angular 7上的虚拟滚动不可见-默认高度为零 [英] virtual scroll on Angular 7 is not visible - the height is zero by default

问题描述

场景:

• 尝试了一个基本的虚拟滚动测试，阅读此

• Tried a basic virtual scroll test reading this blog post
• the array had lots of items
• there was no error
• the list loaded in a virtual scroll but the height of it was 0 by default

快速修复至

• 将cdk-virtual-scroll-viewport的高度设置为500px或将 app.component.css中"example-viewport"类的高度

• set the height for cdk-virtual-scroll-viewport to 500px or set the height for class 'example-viewport' in app.component.css

问题: 克服这个零高度的正确方法是什么?

Question: what is the proper way to overcome this zero height?

示例>

推荐答案

• 使用100％最小高度作为视口并进行验证
• 确保在视口上使用"itemSize"设置的高度与 CSS中的项目

• 如果使用的是Observable，请确保使用* ngIf和异步管道对其进行解析.重要的: html元素是 ng-container ，因为它可能不是 呈现最小宽度才能正常工作！

  • use min-height of 100% for the viewport and verify
  • make sure, the height set on the viewport with 'itemSize' matches the height of the item in css

  • if you are using an Observable, make sure to resolve it with *ngIf and the async pipe. Important: the html element is an ng-container, because it may not be rendered for the min-width to work!

      .list {
         min-height: 100%;
      }
    
      .item {
         height: 100px;
      }
    

  使用Observable作为来源时

  When using an Observable as a source

  <ng-container *ngIf="obs$ | async; let data">
    <cdk-virtual-scroll-viewport itemSize="100" class="list">
  

  这篇关于Angular 7上的虚拟滚动不可见-默认高度为零的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！