如何显示特定数据库子项的详细信息

Question

我正忙于使用 Cloud 9 和 Ionic 以及 Firebase 数据库做一个项目。我遇到的问题是引用特定车辆的详细信息（请参阅数据库布局）并在页面上显示该信息。

{
  "userProfile" : {
    "fjN6auulwkguoB4SsUKyiKXZzNx1" : {
          "birthday" : "1997-06-12",
          "drivers" : {
              "-KqbyzU_KKYtpmewoDza" : "Test"
         },
          "email" : "jason@test.com",
          "licenseNum" : "1234",
          "name" : "Tester",
          "password" : "123456",
          "surname" : "Test",
          "vehicles" : {
              "-Kqbywf6e8VkojtLTUyi" : {
                 "location" : "Stellenbosch",
                 "make" : "Mercedes-Benz",
                  "mileage" : "123",
                  "model" : "SLK",
                  "year" : "2017"
             },
                 "-Kqc-yYdd5DKnodnAWe6" : {
                  "location" : "ste",
                 "make" : "BMW",
                  "mileage" : "123124",
                "model" : "dfg",
                "year" : "2016"
             },
        }

所以基本上用户有一个唯一的密钥，由数据库生成，具有电子邮件生日等属性。这里的目标是引用当前登录的用户来访问他们的唯一密钥，然后显示用户拥有的所有汽车。单击特定汽车后，它应该会将您带到一个新页面，其中包含所单击汽车的详细信息。我正在努力解决如何引用车辆钥匙并将这些详细信息传递到页面。设法在“client-profile.ts”中使用此代码显示用户详细信息：

export class ClientProfilePage {
  private userPhotoUrl:any;
  private userDisplayEmail : any;
  private userDisplaysName : any;
  private userDisplayName : any;
  private userDisplayBirth : any;
  private userDisplayLicense : any;

  constructor(public navCtrl: NavController, private AuthProvider: AuthProvider) { 

    var myUserid= firebase.auth().currentUser.uid; //current user id
    this.displayUser(myUserid);

  }

  displayUser(theUserId){

    var that = this;

    this.AuthProvider.viewUser(theUserId).then(snapshot => {



       that.userDisplayEmail= snapshot.val().email;
       that.userDisplayName= snapshot.val().name;
       that.userDisplaysName= snapshot.val().surname;
       that.userDisplayBirth= snapshot.val().birthday;
       that.userDisplayLicense= snapshot.val().licenseNum
    })
}

然后是“auth.ts”：

export class AuthProvider {

  public fireAuth:firebase.auth.Auth;
  public userProfileRef:firebase.database.Reference;  
  public userProfile:firebase.database.Reference;  

  constructor(public http: Http) {
    this.fireAuth = firebase.auth();
    this.userProfileRef = firebase.database().ref('/userProfile');   

  }



  loginUser(email: '', password: ''): firebase.Promise<any>{
    return this.fireAuth.signInWithEmailAndPassword(email, password);
  }

  viewUser(userId: any){
            var userRef = this.userProfileRef.child(userId);
            return userRef.once('value'); 
}

任何形式的帮助都将不胜感激！

Answer 1

此解决方案应该为您提供一个包含车辆的漂亮数组，作为您可以在视图中使用的userProfile 的属性。

您需要获取 uid 来创建数据库引用 - 您可以简单地从您的 AuthProvider 返回 uid：

let ref = firebase.database().ref('userProfile/' + uid);
const promise = new Promise((resolve, reject) => {
  ref.once('value') // Get the user profile
    .then((userProfile) => {
      ref.child('vehicles') // Get the vehicles
        .once('value')
        .then((vehicles) => {
          var vehicleArray = [];
          vehicles.forEach(vehicle => { // Loop through vehicles and push to array
            vehicleArray.push(vehicle);
          });
          var userProfileWithVehicles = userProfile.val(); 
          userProfileWithVehicles.vehicles = vehicleArray; // Add array of vehicles to userProfile object
          resolve(userProfileWithVehicles);
        });
    });
});

promise.then(userProfile => {
  console.log(userProfile); // Object to give to the view
});

这比您当前的设置有点混乱，但需要嵌套以确保您拥有所有数据。你可以在你的AuthProvider 中执行上述操作，并返回一个承诺给你的ClientProfilePage，如果你希望它出现在提供者而不是视图背后的代码中。

使用车辆数组，您可以遍历并将适当的信息传递到另一个页面。