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