CODEWITHSUNDEEP
firebaseionic-frameworkfirebase-realtime-database
NeunNatter
NeunNatter

Reputation: 87

Data from firebase don't load?

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>

Console.log

Upvotes: 0

Views: 442

Answers (2)

Mahdi
Mahdi

Reputation: 1

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

Upvotes: 0

Sarasa Gunawardhana
Sarasa Gunawardhana

Reputation: 1119

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>

Upvotes: 1

Related Questions