Virtual scroll not loading items until page refresh or segment reload

I have a page with a virtual scroll element. When I route to a page, the elements don't show until I tab to a different segement on the page or refresh the browser. I've set an approximate height for each element as well. Check the elements in the "Rumor Mill" section in this demo gif:

enter image description here

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

Here's my relevant 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>

My relevant ts code, upcomingArray is the result from an observable:

  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;
    }
  }

It's very odd because I have a similar process on a different page that renders just fine. What am I doing wrong here? My segment works by changing a different ng-container ngIf to true is it is selected. That determines what html is displayed.

Thanks!