![](/img/trans.png)
[英]Angular cdk-virtual-scroll-viewport return 0 when calling getBoundingClientRect
[英]Error in cdk-virtual-scroll-viewport when change array of items
我有一个虚拟滚动中的项目(产品)列表,当我更改数组的项目时会出现问题。
例如:
最初,我在滚动中有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个项目。
提前致谢
我找到了解决方案,问题是我设置了属性autosize并产生了错误的行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.