Question

我在代码中显示了firebase in place页面的数据。但我只在place.html中显示标题和区域。现在我想要其他信息，如描述和下一页中的图像我尝试但是错误显示描述未在tour.ts中定义。

firebasedata

{
  "Places" : {
    "Hunza" : {
      "area" : "Gilgit-Baltistan",
      "description " : "Hunza Valley is a mountainous valley located in Gilgit, which is an area under the government of Pakistan. The main town of Hunza, Karimabad (formerly known as Baltit) is the capital as well as most popular tourist destination of Hunza.",
      "image" : "https://firebasestorage.googleapis.com/v0/b/travelagencyapp-36c03.appspot.com/o/places%2Fhunza.jpg?alt=media&token=61c34018-ef64-43e9-a285-3ad1b9ebd3be",
      "season" : "May - June",
      "title" : "Hunza"
    }
  },


}

dataprovider

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';



@Injectable()
export class DataProvider {

  constructor(public http: HttpClient, public afDB : AngularFireDatabase) {
    console.log('Hello DataProvider Provider');
  }

   getPlaces()
  {
    let ref = this.afDB.list('Places').snapshotChanges()
    .map(changes =>{
      return changes.map(c=> ({key:c.payload.key,...c.payload.val()}));
    });

    return ref;

  }



}

place.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AuthProvider } from '../../providers/auth/auth';
import { DataProvider } from '../../providers/data/data';
import { LoginPage } from '../login/login';
import { TourPage } from '../tour/tour';
import { AngularFireDatabase } from 'angularfire2/database';
import {Observable} from 'rxjs/Rx';



/**
 * Generated class for the PlacesPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-places',
  templateUrl: 'places.html',
})
export class PlacesPage {



places: Observable<any[]>;


  constructor(public navCtrl: NavController, public navParams: NavParams, public authProvider: AuthProvider, public dataProvider : DataProvider
  ) {
 this.places = this.dataProvider.getPlaces();

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PlacesPage');
  }



 logout() {
    this.authProvider.logout();
    this.navCtrl.setRoot(LoginPage);
  }

  tour(place) {
  this.navCtrl.setRoot(TourPage,{data:place});
  }





}

places.html

<ion-header>

  <ion-navbar color="primary">
    <ion-buttons start>
      <button ion-button icon-only menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Places</ion-title>
  </ion-navbar>

</ion-header>


<ion-content class="card-background-page" >



 <ion-card  *ngFor="let place of places | async" (click)="tour()">
      <img height="170" src="{{place.image}}">
      <div class="card-title">{{place.title}}</div>
      <div class="card-subtitle">{{place.area}}</div>
    </ion-card>



  </ion-content>

tour.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { DataProvider } from '../../providers/data/data';


/**
 * Generated class for the TourPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-tour',
  templateUrl: 'tour.html',
})
export class TourPage {

data: any;
description: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {


  this.data = this.navParams.get('data');
  this.description = this.data.description;

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TourPage');
  }

}

Answer 1

你的（点击）=＆＃34;游览（）＆＃34;没有将任何数据传递到巡视功能。 tour（）需要至少一个参数被解析到它的位置。

tour(place) {
    this.navCtrl.setRoot(TourPage,{data:place});
}

因此，当您导航到TourPage时，{data：place}将为空。尝试更改： -

<ion-card  *ngFor="let place of places | async" (click)="tour()">

到

<ion-card  *ngFor="let place of places | async" (click)="tour(place)">

它不起作用，你需要解析循环内的（click）事件。

将基础数据导入离子应用程序

1 个答案: