我正在租车项目，
<ion-header>
<ion-navbar >
<ion-title>Nos Voitures</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card>
<img src="assets/audi.png"/>
<ion-card-content>
<ion-card-title>
Toyota prado
</ion-card-title>
<p> Catégorie :suv/4*4 <br>
Energie : Diesel <br>
Puissance fiscale:8cv <br></p>
<button ion-button block outline color="gmail" (click)="detail1('assets/audi.png','Toyota Prado','suv/4*4','diesel','8 cv','5 personnes','5 portes','Manuel','4 airbags','99€','93€','89€','80€','75€','70€')">Détails</button>
</ion-card-content>
</ion-card>
<ion-card>
<img src="assets/accent.png"/>
<ion-card-content>
<ion-card-title>
hyundai accent
</ion-card-title>
<p> Catégorie :citadine <br>
Energie : Diesel <br>
Puissance fiscale:7cv <br></p>
<button ion-button block outline color="gmail" (click)="detail2('assets/accent.png','Hyundai accent','citadine','diesel','7 cv','5 personnes','5 portes','Manuel','4 airbags','99€','93€','89€','80€','75€','70€')">Détails</button>
</ion-card-content>
</ion-card>
export class CarPage {
constructor(public navCtrl: NavController,public cardata:Cardata) {
}
detail1(p,m,ca,e,pu,pe,po,b,a,c,pr1,pr2,pr3,pr4,pr5,pr6){
this.navCtrl.push(DetailAudiPage,{
Photo:p,
Marque:m,
Categorie:ca,
Energie :e,
Puissance :pu,
Personne :pe,
Portes :po,
Boite :b,
Airbags:a,
Prix:pr1,
Prix2:pr2,
Prix3:pr3,
Prix4:pr4,
Prix5:pr5,
Prix6:pr6
});
}
detail2(p,m,ca,e,pu,pe,po,b,a,pr1,pr2,pr3,pr4,pr5,pr6){
this.navCtrl.push(DetailAudiPage,{
Photo:p,
Marque:m,
Categorie:ca,
Energie :e,
Puissance :pu,
Personne :pe,
Portes :po,
Boite :b,
Airbags:a,
Prix:pr1,
Prix2:pr2,
prix3:pr3,
prix4:pr4,
prix5:pr5,
prix6:pr6
});
}
}
import { Component } from '@angular/core';
import { NavController,NavParams} from 'ionic-angular';
import { ReservationPage } from '../reservation/reservation';
@Component({
selector: 'detail',
templateUrl: 'detail.html'
})
export class DetailPage {
constructor(public navCtrl: NavController,public navparams:NavParams ) {
}
marque = this.navparams.get("Marque");
photo = this.navparams.get("Photo");
categorie=this.navparams.get("Categorie");
energie = this.navparams.get("Energie");
puissance = this.navparams.get("Puissance");
personne = this.navparams.get("Personne");
portes = this.navparams.get("Portes");
boite = this.navparams.get("Boite");
airbag =this.navparams.get("Airbags");
prix=this.navparams.get('Prix1');
prix2=this.navparams.get('Prix2');
prix3=this.navparams.get('Prix3');
prix4=this.navparams.get('Prix4');
prix5=this.navparams.get('Prix5');
prix6=this.navparams.get('Prix6');
reservercmd(){
this.navCtrl.push(ReservationPage);
}
}
<ion-header>
<ion-navbar >
<ion-title ><div text-center>{{marque}}</div></ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card>
<img src="{{photo}}"/>
<ion-card-content>
<ion-card-title>
{{marque}}
</ion-card-title>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header> <div text-capitalize>Fiche technique </div></ion-card-header>
<ion-card-content id="marque">
<p> Marque : {{marque}} <br>
Catégorie :{{categorie}}<br>
Energie : {{energie}} <br>
Puissance fiscale:{{puissance}} <br>
Nombre de personnes : {{personne}}<br>
Nombre de portes :{{portes}} <br>
Boite à vitesse : {{boite}}<br>
Airbags: {{airbag}} <br>
</p>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header> Tarif</ion-card-header>
<ion-card-content>
<h1><b>Tarif normal(Juil-Août) </b></h1>
<p> 1 à 3 jours:{{prix}}/jour <br>
4 à 10 jours:{{prix2}}/jour <br>
Plus de 11 jours:{{prix3}} /jour
</p>
<h1><b> Tarif promotionnel </b></h1>
<p> 1 à 3 jours:{{prix4}}/jour <br>
4 à 10 jours:{{prix5}}/jour <br>
Plus de 11 jours:{{prix6}}/jour
</p>
</ion-card-content>
</ion-card>
<ion-card>
<ion-card-header> Nos avantages</ion-card-header>
<ion-card-content>
<p> Assurance tous risques<br>
Une large gamme de véhicules<br>
Kilométrage illimité<br>
Livraison gratuit : Aéroport, Hôtel, Riad <br>
Siège bébé 2€ <br>
Conducteur additionnel 2€ <br>
GPS 2€<p>
</ion-card-content>
</ion-card>
<button ion-button block outline color="gmail" (click)="reservercmd()">Réserver</button>
</ion-content>
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import * as firebase from 'firebase';
/*
Generated class for the Cardata provider.
See https://angular.io/docs/ts/latest/guide/dependency-injection.html
for more info on providers and Angular 2 DI.
*/
@Injectable()
export class Cardata {
public cardetails:any;
constructor(public http: Http) {
var fireref=firebase.database().ref('voiture');
this.cardetails=firebase.database().ref('voiture').child('toyota');
var accent=fireref.child('accent');
var peugeot=fireref.child('peugeot');
var renault=fireref.child('renault');
var ford=fireref.child('ford');
var dacia=fireref.child('dacia');
var i10=fireref.child('i10');
var nissan=fireref.child('nissan');
var Mitsubishi=fireref.child('mitsubishi');
var data1={
marque:"Toyota Prado",
photo:"assets/audi.png",
categorie:'suv/4*4',
energie:'diesel',
carburant:'8 cv',
nbr_personne:'5 personnes',
nbr_portes:'5 portes',
airbags:'oui',
prix:'1000 dh'}
var data2={
marque:"Hyundai Accent",
photo:"assets/accent.png",
categorie:'citadine',
energie:'diesel',
carburant:'8 cv',
nbr_personne:'5 personnes',
nbr_portes:'5 portes',
airbags:'oui',
prix:'1000 dh'
}
var data3={
marque:"Peugeot 301",
photo:"assets/peugeot.jpg",
categorie:'citadine',
energie:'diesel',
carburant:'8 cv',
nbr_personne:'5 personnes',
nbr_portes:'5 portes',
airbags:'oui',
}
var data4={
marque:"Renault Symbole",
photo:"assets/eznault.jpg",
categorie:'citadine',
energie:'essence',
carburant:'8 cv',
nbr_personne:'5 personnes',
nbr_portes:'5 portes',
airbags:'oui',
}
var data5={
marque:"ford fiesta",
photo:"assets/ford.png",
categorie:'citadine',
energie:'diesel',
carburant:'8 cv',
nbr_personne:'5 personnes',
nbr_portes:'5 portes',
airbags:'4 airbags',
}
var data6={
marque:"Dacia logan",
photo:"assets/dacia.jpg",
categorie:'citadine',
energie:'diesel',
carburant:'8 cv',
nbr_personne:'5 personnes',
nbr_portes:'5 portes',
airbags:'4 airbags',
}
var data7={
marque:"Hyundai ix10",
photo:"assets/hyundai-i10.png",
categorie:'citadine',
energie:'diesel',
carburant:'8 cv',
nbr_personne:'5 personnes',
nbr_portes:'5 portes',
airbags:'oui',
}
var data8={
marque:"Nissan Patrol",
photo:"assets/pajero.png",
categorie:'citadine',
energie:'diesel',
carburant:'8 cv',
nbr_personne:'5 personnes',
nbr_portes:'5 portes',
airbags:'4 airbags',
}
var data9={
marque:"Mitsubishi Pajero",
photo:"assets/mits.jpg",
categorie:'citadine',
energie:'diesel',
carburant:'8 cv',
nbr_personne:'5 personnes',
nbr_portes:'5 portes',
airbags:'oui',
}
this.cardetails.set(data1);
accent.set(data2);
peugeot.set(data3);
renault.set(data4);
ford.set(data5);
dacia.set(data6);
i10.set(data7);
nissan.set(data8);
Mitsubishi.set(data9);
}
voirToyota(){
var userRef=this.cardetails;
return userRef.once('value');
}
}
我已经实时添加了火车数据库。问题是我不知道如何获取所选汽车的数据并在详细页面中显示。 并且我不知道在按钮细节中写什么将推送所选项目的detailPage。
在这个汽车页面中，用户应该选择他想要的汽车，然后他可以在详细信息页面中查看汽车的详细信息，这种方法有效，但我想从数据库中检索数据，而不仅仅是在那里写。我已经在数据库中添加了数据，我只需要检索详细页面中选择的汽车的细节。
`