虚拟滚动无法在 Angular 中使用响应数据-cdk-virtual-scroll-viewport答案

【问题标题】：Virtual scrolling Not working in Angular with response data- cdk-virtual-scroll-viewport虚拟滚动无法在 Angular 中使用响应数据-cdk-virtual-scroll-viewport
【发布时间】：2021-06-11 02:42:20
【问题描述】：

我无法将 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;

现在它的绑定b但是当我触摸高度属性时它不会绑定..

【问题讨论】：

标签： angular angular-material virtualscroll

【解决方案1】：

您必须将固定高度定义为 css 规则当您更改列表或页面高度时，您需要控制视口大小

this.cdkVirtualScrollViewport? .checkViewportSize ()

在哪里

@ViewChild (CdkVirtualScrollViewport, {static: false}) cdkVirtualScrollViewport: CdkVirtualScrollViewport

【讨论】：