Angularfire: FirebaseObjectObservable is deprecated but it still is used on this doc page https://github.com/angular/angularfire2/blob/master/docs/rtdb/objects.md

Created on 11 Dec 2017  路  5Comments  路  Source: angular/angularfire

it's confuse, since the documentation in the link on the issue titles it still is use FirebaseObjectObservable instead of AngularFireList<T> as is mentioned on this link https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

here an image what I'm getting when I try to use AngularFireList<T> to retrive an object
image

please let me know how can I solve this issue?

thank you so much.

Most helpful comment

Let's try to make some points here:

  • When working with the real-time database, version 5 is not using FirebaseListObservable and FirebaseObjectObservable anymore, instead, now it uses AngularFireList for lists and AngularFireObject for objects.
  • db.object(.....) will give you back an AngularFireObject; db.list(.......) and AngularFireList. So you could do AngularFireObject<any> author = db.object('authors').
  • if you add ".valueChanges()" afterwards, directly in the same statement, you are basically getting the Observable (whether it is a list or an object) of that AngularFireObject/List to which you can subscribe then. Observable<any> author = db.object('authors').valueChanges()

    • On the other hand, If you just get 'authors', it seems to me like you want to get a List, not an object, the whole list of authors, as you are not specifying any authorId to get just one... AngularFireObject<any> author = db.object('authors/${authorId}') or AngularFireList<any> authorsList = db.list('authors')

  • It is also a good practice if you previously define an interface or a class "Author" with correspondent attributes so you can do AngularFireObject<Author> instead of <any>
  • Another suggestion just so you know, your lines 1 and 3 could be merged together as import { Component, OnDestroy } from '@angular/core';

I hope this answer is readable and helpful for you:)

All 5 comments

Let's try to make some points here:

  • When working with the real-time database, version 5 is not using FirebaseListObservable and FirebaseObjectObservable anymore, instead, now it uses AngularFireList for lists and AngularFireObject for objects.
  • db.object(.....) will give you back an AngularFireObject; db.list(.......) and AngularFireList. So you could do AngularFireObject<any> author = db.object('authors').
  • if you add ".valueChanges()" afterwards, directly in the same statement, you are basically getting the Observable (whether it is a list or an object) of that AngularFireObject/List to which you can subscribe then. Observable<any> author = db.object('authors').valueChanges()

    • On the other hand, If you just get 'authors', it seems to me like you want to get a List, not an object, the whole list of authors, as you are not specifying any authorId to get just one... AngularFireObject<any> author = db.object('authors/${authorId}') or AngularFireList<any> authorsList = db.list('authors')

  • It is also a good practice if you previously define an interface or a class "Author" with correspondent attributes so you can do AngularFireObject<Author> instead of <any>
  • Another suggestion just so you know, your lines 1 and 3 could be merged together as import { Component, OnDestroy } from '@angular/core';

I hope this answer is readable and helpful for you:)

export class AppComponent{
authors:AngularFireObject;

constructor(db:AngularFireDatabase){
this.authors=db.object('/authors/1')
}
}

{{ (authors | async | json)?.name }}

I am also having a similar problem, trying to display the name of the author but nothing gets displayed and i get the InvalidPipeArgument argument

{{authors.name |async | json}}

I also tried this format but still get nothing and the documentation seems to be outdated when it comes to using AngularFireObject

Hi @kaygeeklaas,

Maybe in the "get started" section is not fully updated, but here you have the documentation in detail, all fine :)

real time db docs updated

Anyway here is the solution to your problem:
db.object will return an AngularFireObject indeed, but what you need to display on the view is an Observable (or Observable in case you don't want to define the object); to get an observable out of an AngularFireObject you need to call .valueChanges(), then your binding to the view for the authors list will work with the async pipe correctly.

component.ts

export class AppComponent {
    authors:Observable<any>

    constructor(db:AngularFireDatabase) {
        this.authors=db.object('/authors/1').valueChanges();
    }
}

component.html

{{ authors | async }}

I would encourage you to read a bit more of information about Observables in order to fully understand them

I've been struggling with firebase angular and observables a couple of days and this really helped me a lot. Thank you so much @javieraviles!

Im not getting any output whatsoever from my database. Anything wrong im doing. i followed this documentation but to no avail: https://github.com/angular/angularfire2/blob/master/docs/rtdb/lists.md
fb 2
fb

Was this page helpful?
0 / 5 - 0 ratings