Data from firebase don't load? - firebase

Question

I am trying to get data of a certain userId out of a firebase Database. But nothing happens? I am creating an AngularFireObject of typ Profile
like this:
profileData: AngularFireObject<Profile>;
There is no error in the code. the HTML is shown how i prefer it but without the data.
the only thing what isn't correct, is that the Methode ionViewDidLoad is shown as unused. But when i pass the code inside the constructor it doesn't has any effect.
Can someone help me with that? Thanks a lot!
import { Component } from '#angular/core';
import {IonicPage, NavController, NavParams, ToastController} from 'ionic-angular';
import {AngularFireAuth} from 'angularfire2/auth';
import {AngularFireDatabase, AngularFireObject} from 'angularfire2/database';
import {Profile} from '../../shared/models/profile';
/**
* Generated class for the HomePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
#IonicPage()
#Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
profileData: AngularFireObject<Profile>;
constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase, private toast: ToastController,
public navCtrl: NavController, public navParams: NavParams) { }
ionViewDidLoad() {
this.afAuth.authState.subscribe(data => {
console.log(data.uid);
if (data && data.email && data.uid) {
console.log(data.email);
console.log(data.uid);
this.toast.create({
message: `Welcome to The APP, ${data.email}`,
duration: 5000
}).present();
this.profileData = this.afDatabase.object(`/profile/${data.uid}`)
console.log(this.profileData);
} else {
this.toast.create({
message: `Could not find authentication details`,
duration: 3000
}).present();
}
})
}
}
This is the HTML where i would like to load the data.
profile.ts
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {AngularFireAuth} from 'angularfire2/auth';
import {Profile} from '../../shared/models/profile';
import {AngularFireDatabase} from 'angularfire2/database';
#IonicPage()
#Component({
selector: 'page-profile',
templateUrl: 'profile.html',
})
export class ProfilePage {
profile = {} as Profile;
constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase,
public navCtrl: NavController, public navParams: NavParams) {
}
/*ionViewDidLoad() {
console.log('ionViewDidLoad ProfilePage');
}*/
createProfile(){
this.afAuth.authState.take(1).subscribe(auth => {
this.afDatabase.object(`profile/${auth.uid}`).set(this.profile)
.then(() => this.navCtrl.setRoot('HomePage'))
})
}
}
<p>Username: {{(profile | async)?.username }}</p>
<p>First Name: {{(profile | async) ?.lastName }}</p>
<p>Last Name: {{(profile | async) ?.firstName}}</p>

Answer 1

There is a issue in the path. your path has a userid which concatenated with profile without separating it using slash (/)
Try to re correct path,
this.afDatabase.object(`/profile/${data.uid}`)
To retrieve data and view, do this way
this.afAuth.authState.subscribe(data => {
if (data && data.email && data.uid) {
this.afDatabase.database.ref().child(`/profile/${data.uid}`).once('value', (snapshot) => {
let result = snapshot.val();
for (let k in result) {
this.profileData = result[k];
}
});
}
});
**This is the html **
<p>Username: {{ profileData.username }}</p>
<p>First Name: {{ profileData.lastName }}</p>
<p>Last Name: {{( profileData.firstName}}</p>

Answer 2

in Homepage.ts
you only have to add take(1) in ligne 27 just like that :
this.afAuth.authState.take(1).subscribe(data => {