AngularFireDatabase Does not retrieve data - firebase

Question

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

Answer 1

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.
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);
})
}

Answer 2

There is a compatibility issue in Angularfire2 with rxjs. So, until Angularfire2 provide support for rxjs6, you can resolve this error by installing rxjs-compat package using below command.
npm install rxjs#6 rxjs-compat#6 --save
you can find more information in the rxjs migration guide.
https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md

Answer 3

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