variables not holding data in ionic angular

Question

I am very confused as to why the variables is not holding.
I have a variable user which is assigned with the data in userData(). But it's undefined when console log within the constructor and ProfilePage.

share-service.ts

export class ShareService {
  uid: string;
  user;

  constructor(public db: AngularFireDatabase) {
    let currentUser = firebase.auth().currentUser;
    this.uid = currentUser.uid;
    this.userData();
    console.log('[constructor]user: ', this.user);
  }

  userData() {
    this.db.object(`users/${this.uid}`).snapshotChanges().subscribe(data => {
      this.user = data.payload.val();
      console.log('[userData]user: ', this.user);
    });
  }

  getUser() {
    return this.user;
  }

}

profile.ts

export class ProfilePage {
  user;

  constructor(public navCtrl: NavController, public firebaseService: FirebaseService, shareService: ShareService) {
    console.log('[profile.ts]', shareService.getUser());
  }

}

• "angularfire2": "5.0.0-rc.4",
• "firebase": "4.8.2",
• "ionic-angular": "3.9.2",
• "rxjs": "^5.5.6",
• "@ionic/app-scripts": "3.1.8",
• "typescript": "2.4.2"

I have already tried searching for similar questions like for example this and read that it has something to do with how angular is asynchronous and then upon further investigation I read that promise is needed like this. I also read somewhere that .then() should be used.

I tried several ways to implement those into this use case scenario but all turned out with syntax errors.

In need of advice, please.

Answer 1

Angular provides Async Pipe for this type of Async methods.

user information will be come from firebase server, and it will take time.
in the meanwhile, javascript continues its execution.

that's why you got this.user as undefined, because when JS execute that line, data is not come from server and not assign to it.

so we need to handle this type of methods either by

• callback -- callback to promises
• promises
• async-await
• (here in angular case) observables

so try this

share-service.ts

export class ShareService {
 uid: string;

 constructor(public db: AngularFireDatabase) {
 let currentUser = firebase.auth().currentUser;
 this.uid = currentUser.uid;
 }

 getUser() {
   return this.db.object(`users/${this.uid}`)
     .snapshotChanges()
     .map(data => data.payload.val());
 }
}

profile.ts

export class ProfilePage {
 user;

 constructor(public navCtrl: NavController, public firebaseService: 
  FirebaseService, shareService: ShareService) {
  this.user = shareService.getUser();
 }
}

In Template

<div *ngIf="user | async as _user; else loadingUsers">
  {{_user.username}}
</div>
<ng-template #loadingUsers>
  Loading...
</ng-template>

Answer 2

Here is how you read it..

 userData() {
    return this.db.object(`users/${this.uid}`).snapshotChanges()
    .pipe(map(data => {

      this.user = data.payload.val();
      return this.user;
      console.log('[userData]user: ', this.user);
    }));//import { map } from 'rxjs/operators/map';

}

If you want to access it anywhere use subscribe() on getUser().

  getUser(){
    if(!this.user){
        return this.userData();//return the db call if not set
    }else{
    return of(this.user);//import {of} from 'rxjs/Observable/of;'
  }

In constructor,

  constructor(public db: AngularFireDatabase) {
    let currentUser = firebase.auth().currentUser;
    this.uid = currentUser.uid;
    this.getUser().subscribe(u=>{
        console.log('[constructor]user: ', u);
    });//subscribe to the observable.
  }