显示来自firebase的所选项目

时间：2017-06-16 15:16:59

标签： firebase firebase-realtime-database ionic2 selecteditem

我正在租车项目，

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
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
   });
 }
}
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
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);
 }
}
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

＆＃13;
＆＃13; 
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');

}
  }
＆＃13;
＆＃13;
＆＃13;

我已经实时添加了火车数据库。问题是我不知道如何获取所选汽车的数据并在详细页面中显示。  并且我不知道在按钮细节中写什么将推送所选项目的detailPage。

在这个汽车页面中，用户应该选择他想要的汽车，然后他可以在详细信息页面中查看汽车的详细信息，这种方法有效，但我想从数据库中检索数据，而不仅仅是在那里写。我已经在数据库中添加了数据，我只需要检索详细页面中选择的汽车的细节。

`

0 个答案:

没有答案
相关问题
最新问题