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

Question

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

{
"userProfile" : {
"fjN6auulwkguoB4SsUKyiKXZzNx1" : {
"birthday" : "1997-06-12",
"drivers" : {
"-KqbyzU_KKYtpmewoDza" : "Test"
},
"email" : "[e-mail]",
"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返回承诺。

使用车辆阵列，您可以循环浏览并将适当的信息传递到另一个页面。