How to display data from firebase database in Ionic 3?

Question

I want to display my database data into ionic view. here detail data in my database:

{firstName: "John", lastName: "Doe", username: "jhondoe"}

my code in page controller:

import { AngularFireDatabase,  FirebaseObjectObservable  } from 'angularfire2/database';

profile : FirebaseObjectObservable<Profile>;


this.afAuth.authState.subscribe(data => {
  if(data.email && data.uid){   
    this.afDatabase.object(`profile/${data.uid}`).valueChanges().subscribe(profile => {   
      this.profile = profile;
      console.log(profile);
    });

});

view page:

<ion-content padding>

  <p>Username: {{ profile?.username | async }}</p>
  <p>First Name: {{ profile?.firstName  | async }}</p>
  <p>Last Name: {{ profile?.LastName  | async }}</p>

</ion-content>

but it not work, and display error:

InvalidPipeArgument: 'John' for pipe 'AsyncPipe'

Suraj Rao · Accepted Answer · 2018-03-27 06:09:08Z

1

profile is not a promise/observable since you are setting data after subscription here:

 this.afDatabase.object(`profile/${data.uid}`).valueChanges().subscribe(profile => {   
      this.profile = profile;
      console.log(profile);
    });

Either declare profile as a regular object and remove async:

 profile : Profile;

Html:

<p>Username: {{ profile?.username }}</p>
<p>First Name: {{ profile?.firstName}}</p>
<p>Last Name: {{ profile?.LastName}}</p>

OR.

declare as an observable and do not subscribe in ts.

 profile : Observable<Profile>;



this.profile = this.afDatabase.object(`profile/${data.uid}`).valueChanges();

answered Mar 27, 2018 at 6:09

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display data from firebase database in Ionic 3?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related