How to get details from angularFire Database and set it into a template

Question

I am trying to get a user details from a angularFire2 database. Therefore instead of using the FirebaseListObservable, I am using FirebaseObjectObservable since I am expecting just a user from the path.

This is the path and the colums through which I am deriving the user data

  path: /projects/users/
  columns: userID,username

  data
     userID:"001",
     username:"Icomin"

And this the home.ts

   import { Component } from '@angular/core';
   import { NavController,AlertController,ActionSheetController } from 'ionic-angular';
   import{AngularFireDatabase,FirebaseListObservable,FirebaseObjectObservable} from 'angularfire2/database';
  import {Observable} from 'rxjs/Observable';



@Component({
   selector: 'my-child-component',
   template: `<h1>Welcome {{ (projects | async)}}</h1>` // The template
})
export class HomePage{


projects: FirebaseObjectObservable <any>;

 constructor(af:AngularFireDatabase) {

      this.projects = af.object(`/projects/users`);
  }

I implement the template below, however the returnsWelcome [object object]

The template implementation

 template: `<h1>Welcome {{ (projects | async)}}</h1>`

How do I get the user details from the above path and set it into the template

@FrankvanPuffelen I am not joiing anything, all I am trying to do is get details using the object observables — George
– George, Commented May 30, 2017 at 1:38
Ah, sorry about that. Your code is reading /projects/users, which is a list of data. So your HTML will need to loop over that. Alternatively, make your code read a single user /projects/users/user1. — Frank van Puffelen
– Frank van Puffelen, Commented May 30, 2017 at 1:45

nisanarz · Accepted Answer · 2017-06-04 20:03:09Z

As you mention , you get Welcome [object object] from projects variable. It's mean that you receive a list from this call af.object('/projects/users') .
I dont really know what exactly you want to do with that list but you few options:
1 - show all users in list :

template: ' <h1 *ngFor="let proj of projects | async">{{ proj.username }}</h1>

this will display all user's names , one by one.
2 - show specific user:
(you need to choose the filter criteria: userID or username)

export class HomePage{
  project: FirebaseObjectObservable <any>;
  constructor(af:AngularFireDatabase) {
    this.project = af.list(`/projects/users`,{
      query: {
          orderByChild: 'userID',      //or orderByChild: 'username',
          equalTo: <someUserID>        // equalTo: <someUsername>
      }
    });
  }
}

and then the template to display the current username:
template: <h1>{{ project.username }}</h1>

Hope it fits what you wanted.

Collectives™ on Stack Overflow

How to get details from angularFire Database and set it into a template

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related