本文介绍了Angular 7 上的虚拟滚动不可见 - 默认情况下高度为零的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

场景:

  • 尝试阅读此内容的基本虚拟滚动测试 博文
  • 数组有很多项目
  • 没有错误
  • 在虚拟滚动中加载的列表,但默认高度为 0

快速修复是

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

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

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

示例位于 https://stackblitz.com/edit/angular-efdcyc

推荐答案

  • 对视口使用 min-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 ofthe 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 notbe 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 上的虚拟滚动不可见 - 默认情况下高度为零的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 13:40
查看更多