如何以模态显示用户数据

Question

我目前正在开展一个项目，其中有两种类型的用户：司机和乘客。我正在使用 Ionic Framework 和 Firebase 数据库广告身份验证。乘客可以向司机发送请求，司机可以看到这些请求。我目前正在开发司机主页并创建一个平台，列出乘客/客户的数据和请求。我真的很想使用离子模态来保持信息井井有条，但我不确定如何去做。我继续为驱动程序主页和模式页面附加了 HTML 和 Javascript 文件。非常感谢任何帮助。这是我第一次使用 Firebase，我非常迷茫。

我的数据库结构

驱动程序主页

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController, Modal } from 'ionic-angular';
import { DriverHomePage } from '../driver-home/driver-home';
import { CustomerModalPage } from '../customer-modal/customer-modal';
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
import * as firebase from 'firebase';

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

@IonicPage()
@Component({
  selector: 'page-driver-home',
  templateUrl: 'driver-home.html'
})
export class DriverHomePage {



  const custRef = firebase.database().ref().child('User').orderByChild('type').equalTo('customer').once('value', function(snapshot) {
    snapshot.forEach(function(child) {
    var newCustomer = child.val();
    var firstName=child.val().firstName;
    var lastName=child.val().lastName;
    var phone=child.val().phone;
    var location = child.val().location;
    var numOfPassengers = child.val().numOfPassengers;
    var payment = child.val().payment;
    });
  });




  constructor(private modalCtrl: ModalController, private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase, public navCtrl: NavController, public navParams: NavParams) {

  }

  openModal(){
  //const custData

  /*  const custModal: Modal = this.modalCtrl.create('CustomerModalPage');

    custModal.present();

    custModal.onDidDismiss();*/
  }

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

}

<!--
  Generated template for the DriverHomePage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>driver-home</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <button (click)"openModal()">{{ custRef.firstName }} {{ custRef.lastName }}</button>



</ion-content>

模态

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';
import { AngularFire, FirebaseObjectObservable } from 'angularfire2';
import { AngularFireDatabase } from 'angularfire2/database';
import * as firebase from 'firebase';
/**
 * Generated class for the CustomerModalPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-customer-modal',
  templateUrl: 'customer-modal.html',
})
export class CustomerModalPage {


  const custRef = firebase.database().ref().child(`User`).orderByChild('type').equalTo('customer').on('value', function(snapshot) {
    snapshot.forEach(function(child) {
    var datas = child.val();
    var firstName=child.val().firstName;
    var lastName=child.val().lastName;
    var phone=child.val().phone;
    var location = child.val().location;
    var numOfPassengers = child.val().numOfPassengers;
    var payment = child.val().payment;
    });
  });



  constructor(private fb: AngularFire, private viewCtrl: ViewController, public navCtrl: NavController, public navParams: NavParams) {
  }

  acceptRequest(){

  }


  closeModal() {
    this.viewCtrl.dismiss();
  }
  /*ionViewDidLoad() {
    console.log('ionViewDidLoad CustomerModalPage');
  }*/
  ionViewWillLoad(){
    //const data = this.navParams.get('data');
    console.log();
  }



}

<!--
  Generated template for the CustomerModalPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>CustomerModalPage</ion-title>
    <ion-buttons end>
      <button ion-button (click)="closeModal()">Close</button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <p>{{ custRef.firstName }}</p>
  <p>{{ custRef.lastName }}</p>
  <p>{{ custRef.phone }}</p>
  <p>{{ custRef.location }}</p>
  <p>{{ custRef.numOfPassengers }}</p>
  <p>{{ custRef.payment }}</p>

  <button (click)="acceptRequest()">Accept</button>
</ion-content>

Answer 1

我看到您正在使用 firebase 库来访问您的数据库，我还可以看到您也在导入 angularfire2。我强烈建议您使用 angularfire2 并避免使用 firebase 库，因为这样更容易。你可以在angularfire2 docs阅读更多内容。

对于您的问题，最好的查询是这样的：

this.db.list('/user', ref => ref.orderByChild('type').equalTo('customer'))
.subscribe(users => {
    users.forEach(user => {
      //Do stuff with each user here.
    })
});

另外，请记住在您的组件中注入正确的引用。您的构造函数应如下所示：

constructor(db: AngularFireDatabase) { }