RC1: the first element of a list can not be displayed

Ionic Framework ionic-v3
1

Hello, I have the following problem after upgrading to RC from Beta 11.

my code snippets

... 
pages: Array<{title: string, component: any}>;
  constructor(platform: Platform, private menu: MenuController) {
    platform.ready().then(() => {
      StatusBar.styleDefault();
    });
      this.pages = [
      { title: 'Main Page', component: HelloIonicPage }, 
      { title: 'My First List', component: ListPage },
      { title: 'Anonymous', component: SenderPage },
      
    ];
  }
...

and my .html:

...
<ion-content>
      <ion-list>
        <button ion-item *ngFor="let p of pages" (click)="openPage(p)">
          {{p.title}}
        </button>
      </ion-list>
    </ion-content>

  </ion-menu>

  <ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
...

and then I bring-up Ionic apps by:

ionic serve -l -s -c

I got the following display (snapshot):

image
image514×876 32.3 KB

you can see that the first items in the list ( { title: ‘Main Page’, component: HelloIonicPage }, ) has not been displayed.

I changed the code by inserting a dump element in the first place (see below)

 this.pages = [
      {title: '',component:null},
      { title: 'Main Page', component: HelloIonicPage }, 
      { title: 'My First List', component: ListPage },
      { title: 'Anonymous', component: SenderPage },
      
    ];

then the page displayed as I expected:, see below snapshot

image
image514×876 32.7 KB

2

I had the same problem. But I also had <ion-toolbar> in my template. Something like this:

   <ion-toolbar color="primary">
      <ion-title>Hi, Guest</ion-title>
   </ion-toolbar>
  
  <ion-content class="page_background">
    <ion-list class="page_background">
      <button ion-item menuClose (click)="logIn()">
        Login
      </button>
      <button ion-item menuClose (click)="openSignUpPage($event)">
        Signup
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

What helped me is wrapping <ion-toolbar> part in <ion-header> like this:

  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Hi, Guest</ion-title>
    </ion-toolbar>
  </ion-header>

Hope it helps.