Я показываю данные Firebase на странице места, как показано в коде. но я показываю только заголовок и область в 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"
}
},
}
поставщик данных
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');
}
}