虚拟滚动在带有响应数据的 Angular 中不起作用 - cdk-virtual-scroll-viewport

编程问答 2022-05-21

问题描述

我无法将 cdk-virtual-scroll-viewport 与我的 Angular html 中的数据绑定。

这是我的 jobLists 数组中的数据，它在 ngOnInit 中分配了响应数据

enter image description here

在我的 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
angularangular-materialvirtualscroll