使用 Ionic 3 在 HTML 文件中显示从数据库中检索到的 firebase 数据

Question

如何显示从我的 firebase 数据库中检索到的数据？我需要能够显示数据并将其组织在 HTML 文件中。作为初学者，我想简单地展示客户用户的第一个。我还想最终使它可点击，因为我计划将瘦用户的数据放入模态页面。另外，我不确定当数据库中有多个用户时这将如何工作，因此如果有人可以解释该过程，将不胜感激。我附上了一张我的数据库以及 Javascript 和 HTML 文件的图片。感谢所有帮助。谢谢。

我的数据库模型

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, FirebaseObjectObservable } 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').on('value', function(snapshot) {
    snapshot.forEach(function(child) {
      var data = child.val();
      console.log(data.firstName + ' ' + data.lastName + ' ' + data.location  );
    });
  }, function(error) {
    // The Promise was rejected.
    console.log('Error: ',error);
});

  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>

  <div padding>
    <p>I WANT TO DISPLAY FIRST NAME HERE</p>
  </div>



</ion-content>

Answer 1

    users = [];

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

       firebase.database().ref().child(`/user`).orderByChild('type').equalTo('customer').once( "value", ( snapshot )=>{
          let result = snapshot.val(); //snapshot.val() gives key value pairs
          //you can make object array to show data on html using *ngFor
          for(let k in result){
              this.users.push({
                 id : k, //gives key of each object
                 value : result[k] //gives user values
              })
          }
       });
    }

你可以像这样使用实现modal的功能在构造函数之后显示。

opneModal(object){
     var obj = { //edited
        id : object.id , 
        firstname : object.value.firstName, 
        location : object.value.location }
    var modalPage = this.modalCtrl.create('YourModalPage',obj); //edited
    modalPage.onDidDismiss(data => {

    });
    modalPage.present();
}

HTML

    <ion-list *ngFor="let user of users">
        <ion-item (click)="openModal(user)">

          <p>{{user.id}}</p>
          <p>{{user.value.firstName}}</p>
          <p>{{user.value.location}}</p>
        </ion-item>
    </ion-list>

在YourModalPage

的构造函数中使用navprams点击客户时，可以从YourModalPage获取单个客户的数据

让 user_first_name = navParams.get("firstname"); //已编辑 让位置= navParams.get("位置"); //已编辑

How To Create Modal and its behavior