离子后退按钮没有显示

时间:2018-04-26 14:38:52

标签: angular ionic-framework

我正在使用Ionic创建应用程序,我正在尝试创建导航器和推送页面。 这是我的代码。

list.html

<ion-header>
<ion-navbar>
<button ion-button menuToggle>
  <ion-icon name="menu"></ion-icon>
</button>
<ion-title>Paises</ion-title>
</ion-navbar>
</ion-header>

 <ion-content>
   <ion-card *ngFor="let pais of paises | async"                                            
(click)="cambiarPagina()">
  <ion-item>
  <ion-avatar item-start>
    <img src="{{pais.bandera}}">
  </ion-avatar>
  <h2>{{pais.nombre}}</h2>
  <p>Su nivel en el ranking de la FIFA es: {{pais.ranking}}</p>
  </ion-item>
 </ion-card>
 </ion-content>

这是我的list.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import { AngularFireList } from 'angularfire2/database';
import { AboutPage } from '../about/about';

@Component({
  selector: 'page-list',
  templateUrl: 'list.html'
})
export class ListPage {
  pais: AngularFireList<any>
  paises: Observable<any[]>


constructor(public navCtrl: NavController, public navParams: 
 NavParams, public db: AngularFireDatabase) {
 // If we navigated to this page, we will have an item available as a 
 nav param
  this.paises = db.list('paises').valueChanges();
 }

 cambiarPagina(){
   this.navCtrl.push(AboutPage);
 }
}

这是我的about.html

<ion-content padding class="about">
   This is my super awesome about page.
</ion-content>

这是我得到的例子

enter image description here 任何人都可以帮助我,我做错了什么?

1 个答案:

答案 0 :(得分:2)

您的modified中没有<ion-navbar></ion-navbar>,后退按钮属于它,请尝试将其添加到您的about.html