更改項目數組時，cdk-virtual-scroll-viewport中出現錯誤

Question

我有一個虛擬滾動中的項目（產品）列表，當我更改數組的項目時會出現問題。

例如：

最初，我在滾動中有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個項目。

提前致謝

Answer 1

我找到了解決方案，問題是我設置了屬性autosize並產生了錯誤的行為。