Ionic2 Segment and Virtual Scroll don't work together properly

Here is my home.ts

export class HomePage {
    constructor(private nav: NavController) {}

    sgm: string = "sgm1";
    items1: number[] = [1, 2, 3];
    items2: number[] = [4, 5, 6];
}

and here is my home.html

<ion-header>
<ion-navbar *navbar>
  <ion-title>
    Ionic 2
  </ion-title>
</ion-navbar>  
    <ion-toolbar no-border-top>
        <ion-segment [(ngModel)]="sgm">
            <ion-segment-button value="sgm1">
                Segment1
            </ion-segment-button>
            <ion-segment-button value="sgm2">
                Segment2
            </ion-segment-button>
        </ion-segment>

    </ion-toolbar>
</ion-header>


<ion-content class="has-header">
    <div [ngSwitch]="sgm">
      <div *ngSwitchCase="'sgm1'">
          <ion-list  [virtualScroll]="items1">
              <ion-item *virtualItem="let item">
                  {{ item }}
              </ion-item>
          </ion-list>
      </div>

      <div *ngSwitchCase="'sgm2'">
          <ion-list  [virtualScroll]="items2">
              <ion-item *virtualItem="let item">
                  {{ item }}
              </ion-item>
          </ion-list>
      </div>
    </div>
</ion-content>

With this code, my app shows a blank list (as )

But, if I add some random text after ngSwitchCase directive and just before ion-list directive like this code:

      <div *ngSwitchCase="'sgm1'">
           random text
          <ion-list  [virtualScroll]="items1">
              <ion-item *virtualItem="let item">
                  {{ item }}
              </ion-item>
          </ion-list>
      </div>

then my app shows the list correctly (as attached file:
)

Environment: Ionic 2 beta 11 Angular 2 RC 4

Not how if this is an Ionic’s bug or if my code is not correct. Thanks for any helps

[jonaszuberbuehler]

@vong-xiv @jeronimonascimento Have you tried replacing *ngSwitchCase with [hidden]? It worked in our case:

<ion-content class="has-header">
    <div [hidden]="sgm !== 'sgm1'">
        <ion-list  [virtualScroll]="items1">
            <ion-item *virtualItem="let item">
                {{ item }}
            </ion-item>
        </ion-list>
    </div>

    <div [hidden]="sgm !== 'sgm2'">
        <ion-list  [virtualScroll]="items2">
            <ion-item *virtualItem="let item">
                {{ item }}
            </ion-item>
        </ion-list>
    </div>
</ion-content>

[ghenry22]

this still exists. Here is a screencap of how a simple virtualscroll list works in a segment (same in any kind of conditional) today with ionic 3.3.0. It is 100% unusable.

In the attached screen cap the virtualscroll list is about 100 items, more than enough to fill the screen but the initial display when entering the view for the first time only displays the first couple of items in the list.

Upon scrolling the display flickers, goes blank, flashes up briefly some of the scrolling items, then they disappear. When I scroll back up I get gaps, blanks and flickering again.

Finally if I navigate to another segment and then come back the list is not displayed at all, there is nothing there, you cannot scroll to try and it to show something it is just not rendered.

You can see a brief scroll of a short list on one of the other segments showing it performs normally with ngFor as long as the list is not big enough to slow it down.

This is a major issue that makes virtualscroll combined with any kind of conditional wrapper (including very normal cases like a segment) completely 100% unusable. Having to use ngFor in these sections means that my app performs very poorly as people build up longer lists, this is resulting in significant negative feedback on my app.

Please (and I don’t know how else I can beg at this point) can you look at virtual scroll and actually make it useable? I consider myself lucky that I have managed to even release my app on iOS at this point after making many concessions but I am receiving regular negative feedback about performance due to areas where I have to revert to ngFor with longer lists due to bugs like this.