angular - 将基础数据发送到离子应用程序

Question

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

基于火的数据

{
  "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"
    }
  },


}

数据提供者

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;

  }



}

地点.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});
  }





}

地方.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>

旅游.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');
  }

}

标签： angularionic-framework

Answer 1

您的 (click)="tour()" 没有将任何数据传递给 tour 函数。tour() 至少需要将一个参数解析到其中，即 place.

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) 事件。