AngularFire2 - .valueChanges() does not return my data

3
votes

I'm new with AngularFire + Firebase and I'm trying to do the tutorial from angularfire2 github.

When I do this code:

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

And print in the console the variable this.items it's showing the sentence below as value (I've ):

Observable {_isScalar: false, source: Observable, operator: MapOperator}
operator
:
MapOperator {project: ƒ, thisArg: undefined}
source
:
Observable {_isScalar: false, _subscribe: ƒ}
_isScalar
:
false
__proto__
:
Object

My question is, where is the data from database? I've created a database with some data to do this, but nothing from the node 'items' is returned.

Thanks in advance

my firebase structure:

{
    "items": {
        "1": {
            "code": "C001",
            "name": "client test"
        },
        "2": {
            "code": "C002",
            "name": "client test 2"
        }
    }
}

Edit:

My imports:

Component:

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

NgModule:

AngularFireModule.initializeApp({
      // data from firebase
    }),
    AngularFireDatabaseModule

I'm using Firebase Realtime Database

Resolved

It was a problem with the rxjs version. I updated to 6.2.0 version and the code worked :)

2
angularionic-frameworkangularfire

2 Answers

1
votes

First, you don't query inside constructor. Leave constructor simple and use lifecycle hooks or your own methods.

As I can see, items is an Observable. But you didn't subscribed to it. You need to subscribe to items or you can use async pipe in your template. The data will be resolved over time.

In your class :

this.db.collection("items")
  .valueChanges()
  .subscribe(res => {})

Or in template :

<some-component *ngFor="let item of items | async"></some-component>
0
votes

try with snapshotChanges()

What is it? - The current state of your collection. Returns an Observable of data as a synchronized array of DocumentChangeAction[].

this.db
  .collection("azucar_nacional")
  .snapshotChanges()
  .subscribe(e => {
    e.forEach(elem => {
      console.log(elem.payload.doc.data());
    });
  });

https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md