标签: angular-cdk-virtual-scroll

我正在使用 Angular Material Virtual 滚动，项目被正确加载到 DOM 中，但是在滚动时它会跳转并自动跳转到末尾。

<cdk-virtual-scroll-viewport #scrollViewport  (scrolledIndexChange)="scrolled($event)" [itemSize]="ITEM_SIZE"  class="my-virtual" >
    <div *cdkVirtualFor="let elem of elemtArray;" class="input-field-container ">

        <div class="my-style" >{{elem}} </div>

    </div>
</cdk-virtual-scroll-viewport>

如果发生故障，滚动方法的输出如下：

Scrolled:  105
Scrolled:  115
Scrolled:  106
Scrolled:  117
Scrolled:  109
Scrolled:  119
Scrolled:  110
Scrolled:  121

如果发生这种情况，它会自动滚动到虚拟滚动的末尾。

我注意到当我将 cdk 虚拟滚动的 itemSize 设置为较低的值时，页面的加载时间几乎是两倍。

<cdk-virtual-scroll-viewport [itemSize]="45"和<cdk-virtual-scroll-viewport [itemSize]="20"（一个有 2k 行的表）之间有很大的不同。

我的问题是为什么页面的加载从 2 秒到将近 5 秒？怎么会有这么大的不同？

在我的Angular应用程序中，我使用的是来自 Angular cdk的Virtual Scroll。

这是我的组件模板：

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

在我的 Component 类中，我有一个方法可以更改数组items并为其提供新内容。每次调用此方法时，数组的大小都可以更改：

reload(newItems) {
  this.items = newItems;
}

调用该方法后reload，项目数组将正确更新，并且视图会反映此更改。但是，滚动不会回到顶部。

我希望每次items更改数组时都使用虚拟滚动来重置顶部的滚动。

我试图通过虚拟滚动组件加载 20 个项目，但我在页面加载后立即看到 34 个项目，根本不进行任何滚动。我弄错了 css 吗？或者我忘记了控件上的某些设置？该项目位于此处。