0

我在虚拟滚动中有一个项目（产品）列表，当我更改数组的项目时会出现问题。

例如：

最初我在卷轴中有 100 个项目。

然后我运行一个函数“reloadItems()” ，将 100 个项目更改为 4 个项目。

如果我以前向下滚动，它工作正常。

否则，虚拟滚动只显示视图中可见的项目而不显示其他项目（在我的情况下，它只显示 2 个项目而不是 4 个）

正如您在下一张图片中看到的，卷轴的底部没有显示任何产品。

在此处输入图像描述

<cdk-virtual-scroll-viewport itemSize="50" style="min-height: calc(80% - 105px);" class="example-viewport"
    [hidden]="!hasProductsInStock" autosize minBufferPx="600" maxBufferPx="800">
       <div *cdkVirtualFor="let p of dataSource" class="example-item">
           <mat-card class="example-card mat-elevation-z5">
               <div style="width: 100%;text-align: center;">
                   <img mat-card-image src="{{ '/api/products/' + p.id + '/image' }}" alt="" style="width: 49%;" />
               </div>
               <mat-card-content>
                   <div class="txt_name">
                       {{ p.name }}
                   </div>
                   <div class="price_and_cant">
                       <div class="price">
                           <b>$ {{ p.price }}</b>
                       </div>
                       <div class="div_add_remove">
                           <i>remove</i>
                           <div><span>{{ getProductAmount(p.id) }}</span>
                           </div>
                           <i>add</i>
                       </div>
                   </div>
               </mat-card-content>
           </mat-card>
       </div>
   </cdk-virtual-scroll-viewport>

CSS

.example-viewport {
  min-height: calc(97% - 105px);
}

我想显示所有项目，当我将数组从 100 个项目更改为 4 个项目时，我需要滚动显示 4 个项目。

提前致谢

4

1 回答 1

1

我找到了解决方案，问题是我设置了属性autosize并产生了错误的行为。

于 2019-08-11T17:14:32.603 回答