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
              })
          }
       });
    }

你可以使用工具这样的构造函数来实现模态的功能。

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”）; //编辑 let location = navParams.get（“location”）; //编辑

How To Create Modal and its behavior

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

1 个答案: