0

Criei um projeto blank na versão 2 do ionic, acrescentei duas paginas ficando com HomePage e a Pagina1 e 2 e pretendendo mostrar uma lista das paginas no menu implementei no código do app.component

import { HomePage } from '../pages/home/home';
import { Page1 } from '../pages/page1/page1';
import { Page2 } from '../pages/page2/page2';

@Component({
    templateUrl: 'app.html'
})

export class MyApp {
   @ViewChild(Nav) nav: Nav;

   rootPage: any = HomePage;
   pages: Array<{title: string, component: any}>;

   constructor(public platform: Platform) {
      this.initializeApp();

      this.pages = [
         { title: 'Home', component: HomePage },
         { title: 'Pagina Um', component: Page1 },
         { title: 'Pagina Dois', component: Page2 },
      ];
}

Em app.html criei o menu e fiz uso do ngFor para apresentar os itens

<ion-menu [content]="menuContent">
<ion-toolbar color="primary">
   <ion-title>Menu</ion-title>
</ion-toolbar>

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

  </ion-list>
</ion-content>

</ion-menu>
<ion-nav [root]="rootPage" #menuContent></ion-nav>

O projeto esta rodando, nenhum erro em execução contudo eu tenho um array de três itens para ser listado só que apenas aparece Pagina 1, e Pagina2 ou seja o primeiro da lista que seria Home não aparece

Estes são os primeiros passos que dou em Angular, Ionic quem puder dar uma ajuda onde estou cometendo o erro ou se não tem erro mais o motivo para HomePage não aparecer

Há um detalhe, ja que na lista HomePage não aparece então removi ele do array, estando agora apenas com dois elementos o resultado é que meus itens do menu agora só mostra o Pagina 2, será que tem a ver com algum css que esteja "escondendo" o primeiro item ou ele esta ficando bem acima do primeiro? vejam na imagem em anexo que tenho os três itens "Botões" e eu inspecionei o segundo item mais capturei a imagem quando passava o mouse sobre o primeiro botão na aba Html Inspencionando o elemento

Robson

2
  • Fiz ontem um menu igual ao seu e deu certo. Vc viu se no chrome aparece certo? Veja se isso acontece também se usar o ionic serve --lab. Commented 31/01/2017 às 15:58
  • Olá André boa noite, não não é nada no navegador, descobri o que é vou colocar a resposta aqui, mais meu valeu só sua interação ok, obrigado já tava apreensivo por ninguém ter feito nem um comentário rsrsrs.
    – Robson
    Commented 1/02/2017 às 0:21

1 Resposta 1

1

O problema é realmente que o primeiro Item esta lá em cima da pagina lá no topo o que poderiamos resolver com css mais não, não seria esta a solução correta.

Sempre que tiver uma Toolbar coloque ela dentro de um header conforme esta abaixo.

<ion-menu [content]="menuContent">
   <ion-header>
      <ion-toolbar color="primary">
         <ion-title>Menu</ion-title>
      </ion-toolbar>    
   </ion-header>

Com isto os itens do Menu se apresentam corretamente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .