如何顯示特定數據庫子項的詳細信息

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的承諾。

使用車輛數組，您可以循環並將適當的信息傳遞到另一頁面。