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

Question

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

{ 
    "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" 
      }, 
     } 

所以基本上用户都有一个唯一的关键，是由数据库生成，与像电子邮件生日属性等。这里的目标是要引用当前用户登录后才能访问其独特的键，然后显示所有的车该用户拥有。一旦点击了特定的汽车，它应该带你到一个新的页面，并点击汽车的详细信息。我正在努力如何引用车钥匙并将这些细节传递给页面。在“客户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的承诺。

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