虚拟滚动在页面刷新或段重新加载之前不会加载项目

Question

我有一个带有虚拟滚动元素的页面。当我路由到页面时，直到我在页面上切换到其他段或刷新浏览器后，这些元素才会显示。我也为每个元素设置了一个近似的高度。检查此演示gif的“谣言磨坊”部分中的元素：

https://media.giphy.com/media/TXR2YZMgURiX7S6bYb/giphy.gif

这是我相关的html：

<ng-container *ngIf="upcomingTab">
    //removed code where i generate the confirmed row
    <ion-row class="subheader-row">
      <ion-col class="subheader-text">
        Rumor Mill
      </ion-col>
    </ion-row>
    <ion-virtual-scroll [items]="rumorMill" approxItemHeight="70px">
      <div *virtualItem="let item">
        <app-album-list-item [album]="item" (click)="goToRelease(item.submissionUID)"></app-album-list-item>
      </div>
    </ion-virtual-scroll>
  </ng-container>

我的相关ts代码upcomingArray是可观察到的结果：

  if (upcomingArray !== undefined || upcomingArray != 0) {
    //remove the first result as that's shown in the confirmed row
    var rumorArray = upcomingArray.filter((rumor, index) => {
      return index > 0;
    })
    if (rumorArray.length > 0) {
      this.rumorMill = rumorArray;
    }
  }

这很奇怪，因为我在不同的页面上进行了类似的处理，效果很好。我在这里做错了什么？通过选择其他ng-container ngIf为true来实现我的细分。决定显示什么html。

谢谢！