0

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

工作显示：任何；像这样贴花并分配

this.jobToDisplay = this.jobLists;

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

4

1 回答 1

0

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

this.cdkVirtualScrollViewport? .checkViewportSize ()

在哪里

@ViewChild (CdkVirtualScrollViewport, {static: false}) cdkVirtualScrollViewport: CdkVirtualScrollViewport
于 2021-06-16T09:59:35.493 回答