Angular 7上的虚拟滚动 – 默认情况下高度为零

发布时间：2020-12-17 10:25:41 所属栏目：安全来源：网络整理

导读：场景：尝试阅读此blog post的基本虚拟滚动测试数组有很多项目没有错误列表中加载的虚拟滚动但默认值为0 快速修复是为了将cdk-virtual-scroll-viewport的高度设置为500px或设置 app.component.css中类“example-viewport”的高度题：什么是克服这个零

场景：

>尝试阅读此blog post的基本虚拟滚动测试
>数组有很多项目
>没有错误
>列表中加载的虚拟滚动但默认值为0

快速修复是为了

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

题：
什么是克服这个零高度的正确方法？

样品于https://stackblitz.com/edit/angular-efdcyc

>对视口使用100％的最小高度并验证
>确保使用’itemSize’在视口上设置的高度与高度相匹配
css中的项目
>如果您使用的是Observable,请确保使用* ngIf和异步管道解决它.重要：
html元素是一个ng-container,因为它可能不是
渲染为最小宽度工作！

.list {
     min-height: 100%;
  }

  .item {
     height: 100px;
  }

使用Observable作为源时

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!