如何解决虚拟滚动在带有响应数据的 Angular 中不起作用 - cdk-virtual-scroll-viewport
我无法将 cdk-virtual-scroll-viewport 与我的 Angular html 中的数据绑定。
这是我的 jobLists 数组中的数据,它在 ngOnInit 中分配了响应数据
在我的 html 类中,我有这样的示例
<cdk-virtual-scroll-viewport itemSize="50">
<div *cdkVirtualFor="let currentJob of jobLists">
<mat-card class="job-list">
<div class="posted-on">
<span class="loc">Posted On</span>: {{ currentJob.posteddate }}
</div>
</mat-card>
</div>
我已经导入
import { ScrollingModule } from '@angular/cdk/scrolling';
在我的 appmodule.ts 中
我检查了 project.json CDK 已经存在。
当我尝试使用正常的 *ngFor 值显示时,显示没有任何问题。
我还需要为这项工作添加什么吗?
更新
当我尝试简单地显示带有 10000 的数字时,它显示正确。所以看起来绑定值的问题。知道我的价值有什么问题吗?
更新 2
我认为 [itemSize]="100" style="height: 900px;overflow-y:auto;" 现在它来了,我修改了我的 .ts
jobTodisplay:任意;像这样贴上它并分配
this.jobTodisplay = this.jobLists;
现在它的 bindingb 但是当我触摸 heightproperty 它不会绑定..
解决方法
你必须定义一个固定的高度作为 css 规则 当您更改列表或页面高度时,您需要控制视口大小
this.cdkVirtualScrollViewport? .checkViewportSize ()
哪里
@ViewChild (CdkVirtualScrollViewport,{static: false}) cdkVirtualScrollViewport: CdkVirtualScrollViewport
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。