CODEWITHSUNDEEP
angulartypescriptfirebasefirebase-realtime-databaseangularfire2
Sireini
Sireini

Reputation: 4262

How to retrieve data from firebase database with an observable

Setup: 

 1. ionic: 3.20.0
 2. AngularFire2 V5.0.0-rc6
 3. Cordove: 8.0.0
 4. firebase: "^4.12.0"

I try to retrieve data from my database like this:

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

Where FirebaseListObservable has no exported member 'FirebaseListObservable'

export class HomePage {
   items: FirebaseListObservable<any[]>;

   constructor(
      public db: AngularFireDatabase
    ){

       this.items = db.list('/restaurant_menu');
       console.log('check', this.items);
    }
}

And in the html template: 

<ion-list>
    <ion-item class="text" *ngFor="let item of items">
        {{item}}
    </ion-item>
</ion-list>

But this returns me: Error: Cannot find a differ supporting object '[object Object]'

And the console.log shows me this:

{query: Reference, update: ƒ, set: ƒ, push: ƒ, remove: ƒ, …}
auditTrail:ƒ (events)
push:ƒ (data)
query:Reference {repo: Repo, path: Path, queryParams_: QueryParams, orderByCalled_: false}
remove:ƒ remove(item)
set:ƒ dataOperation(item, value)
snapshotChanges:ƒ (events)
stateChanges:ƒ (events)
update:ƒ dataOperation(item, value)
valueChanges:ƒ (events)
__proto__: Object

Upvotes: 2

Views: 8304

Answers (3)

Santi Barbat
Santi Barbat

Reputation: 2295

Since RxJS 6 you can use the from() operator like:

getUsers(): Observable<firestore.DocumentSnapshot<firestore.DocumentData>> {
    return from(this.db.collection('users').get());
}

Upvotes: -1

Melchia
Melchia

Reputation: 24234

You can store the observable (valuechanges) in a variable then use the async tag.

   items$: Observable<any[]>;
  constructor(public db: AngularFireDatabase){
       this.items$ = this.db.list('/restaurant_menu').valueChanges();
    }

In your html

<ion-list>
    <ion-item class="text" *ngFor="let item of (items$ |async)">
        {{item}}
    </ion-item>
</ion-list>

Upvotes: 1

Hareesh
Hareesh

Reputation: 6900

Here is how Angularfire2 doc says

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

export class HomePage {
   itemsRef: AngularFireList<any>;
   items: Observable<any[]>;

   constructor(
      public db: AngularFireDatabase
    ){

       this.itemsRef = db.list('restaurant_menu');
       this.items = this.itemsRef.valueChanges();
       this.items.subscribe(res=> console.log(res));
    }
}

You can check the doc

Upvotes: 3

Related Questions