ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
128 stars 85 forks source link

Ionic2 Segment and Virtual Scroll don't work together properly #124

Open ionitron-bot[bot] opened 5 years ago

ionitron-bot[bot] commented 5 years ago

Original issue by @vong-xiv on 2016-08-16T05:32:51Z

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 blanklist )

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:
listshown )

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

xaxim commented 5 years ago

For those with the same problem: I gave up on this issue long ago. Use the infinite scroll instead, great performance, and easy to adjust if your list becomes paginated.