Angular CDK虚拟滚动结合Ionic Grid滚动时元素位置错乱问题求助

大家好，我目前在开发一个Angular项目，用Angular CDK的虚拟滚动组件搭配Ionic Grid来渲染卡片列表，需求很明确：

• 移动端每行显示2张卡片
• 平板/桌面端每行显示3张卡片
• 同时要支持基于cdk-virtual-scroll-viewport的无限滚动

我写了一段简化后的核心代码如下：

<cdk-virtual-scroll-viewport 
  (scrolledIndexChange)="elementScrolled($event)" 
  [itemSize]="gridItemSize" 
  [minBufferPx]="gridMinBuffer" 
  [maxBufferPx]="gridMaxBuffer" 
  class="ion-content-scroll-host" 
  *ngIf="!noData">
  <ion-list>
    <ion-grid 
      *ngIf="sharedService.listingViewMode === listingView.Grid && !!searchdata.length" 
      class="browse-listing-card-container card-listing-grid-container">
      <ion-row 
        class="ion-no-padding" 
        *cdkVirtualFor="let row of chunkedSearchData; trackBy: trackByRowFn; let listIndex = index">
        <ion-col 
          [size]="12 / gridColumns" 
          *ngFor="let item of row; trackBy: trackByFn" 
          (click)="goToDetails(item)" 
          class="ion-no-padding grid-col" 
          [class.highlight]="item.Decorations.includes('Highlight')">
          <app-lot-card [listing]="item"></app-lot-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-list>
</cdk-virtual-scroll-viewport>

遇到的问题 #

现在碰到了一个特别头疼的问题：当我向下滚动页面时，卡片会出现严重的位置错乱和跳动——本来应该在左列的卡片突然跑到右列，有时候同一张卡片还会在不同的行重复渲染。我排查后觉得问题根源应该是我把原始数据拆分成按行分组的chunkedSearchData，然后在*cdkVirtualFor里循环这些行的实现方式。

我的预期效果 #

我就想实现一个流畅稳定的卡片网格：

• 移动端2列、平板/桌面端3列的布局能一直保持正确
• 用CDK虚拟滚动时，滚动过程中卡片绝对不能出现位置错乱、重复渲染或者跳动的情况

我之前的尝试 #

我把原始数据按行分组得到chunkedSearchData，然后用*cdkVirtualFor循环这些行，本以为这样每个卡片都能固定在对应的列位上滚动，但实际滚动时完全达不到预期，位置错乱的问题非常明显。

有没有朋友遇到过类似的问题？或者能帮我指出哪里出问题了，以及该怎么修复？

内容来源于stack exchange