Reputation: 205
I have a list of items (products) inside a virtual scroll, the problem occurs when I change the items of array.
For example:
Initially I have 100 items in the scroll.
Then I run a function "reloadItems()" that change the 100 items to 4 items.
If I previously ran the scroll down, it's works fine.
Otherwise, the virtual scroll only shows the items visible in the view and doesn't show the other items ( in my case it shows only 2 items instead of 4)
As you can see in the next image the bottom of the scroll does not display any products.
<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);
}
I want to show all the items, when I change the array from 100 items to 4 items I need the scroll to show 4 items.
Thanks in advance
Upvotes: 1
Views: 2085
Reputation: 205
I found the solution, the problem was that i set the attribute autosize and generated the wrong behavior.
Upvotes: 1