Multi tool use

AngularFireDatabase Does not retrieve data

Whenever I use afDB.list('/path') method, I get the following:
console.log(this.items);

and I have this example as my firebase database: listings file

surprisingly, editing the data works perfectly fine (e.g. remove(), push(),... etc.), but I can't seem to be able to retrieve it; however, I can access it. I thought it might be a rules issue, yet, my rules are fine: firebase Rules

this is the portion of the code that I'm having trouble with:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireAuth } from 'angularfire2/auth';
import { FirebaseProvider } from '../../providers/firebase/firebase';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';
import * as firebase from 'firebase/app';

//import { ListingDetailsPage } from '../listing-details/listing-details';



@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

items: Observable<any>;

constructor(
public navCtrl: NavController,
public afAuth: AngularFireAuth,
public firebaseProvider: FirebaseProvider,
public afDB: AngularFireDatabase
) {
this.items = afDB.list('/listings', ref => ref.orderByChild('age').equalTo('large')).valueChanges();
}

login(){
this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()).then(res => console.log(res));
}

logout() {
this.afAuth.auth.signOut();
}

list(){
console.log(this.items);
}

}


I also tried to use AngularFireList instead of Observable, but it doesn't change the issue. I also used afDB.object() instead of afDB.list(), I still get the same problem. Query is not the issue either, as I tried to use a simple .list()/.object() and again the same issue. additionally, I created a database using the same code (.set()), and I couldn't retrieve it either.

Relevant Specs:

"angularfire2": "^5.0.0-rc.11",
"firebase": "^5.2.0",
"promise-polyfill": "^8.0.0",
"ionic-angular": "3.9.2",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",


OS: Windows10
platforms tested: Google Chrome Browser/ Firefox Browser/ Android SDK emulator

2 Answers
2

You've defined your items variable as an observable (and that is correct) but if you want to play with the data returned from that observable, you need to subscribe to that observable.

items

constructor(
public navCtrl: NavController,
public afAuth: AngularFireAuth,
public firebaseProvider: FirebaseProvider,
public afDB: AngularFireDatabase
) {
this.items = afDB.list('/listings', ref => ref.orderByChild('age').equalTo('large')).valueChanges();
this.items.subscribe( valueOfItems => {
console.log(valueOfItems);
})
}


there is also a "template driven" way to retrieve data.

Template :

// example 1
<ul>
<li *ngFor="let dino of dinosaurs$ | async">
<p>{{vdino.name }}</p>
</li>
</ul>

// example 2
<ul>
<li *ngFor="let dino of dinosaursArray">
<p>{{vdino.name }}</p>
</li>
</ul>


Controller :

constructor(private afDb: AngularFireDatabase) {
const itemsRef: AngularFireList<any> = afDb.list('dinosaurs');

// example 1
this.dinosaurs$ = itemsRef.valueChanges();

// example 2
this.dinosaurs$.subscribe(array => this.dinosaursArray = array);
}


Here a stackblitz with the two examples (credits to @markgoho) :
https://stackblitz.com/edit/angular-trrnhg

The deps are a bit outdated but it still should work for you.

Moreover, @JeremyW answer should work, can you be more specific on the error ?

EDIT : " error: TypeError: Object(...) is not a function"

If you face this error, this is likely a compatibility problem with rxjs 5, you may try with rxjs 6.

check this post :
Angular2 fire listen to node changes throws an error

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.