Angular 5 - async pipe with firebase

2
votes

I want to add async pipe to angular firebase but i've got error that I don't know how to fix:

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Firebase NoSQL database:

{
  "boss" : [ null, {
    "isPremium" : true,
    "name" : "John",
    "students" : 10000
  } ],
  "users" : [ null, "user", "user2" ]
}

UPDATE

I've changed component code:

user$: AngularFireList<any>;

  constructor(db: AngularFireDatabase) {
    this.user$ = db.list("/users");
  }

html:

<ul>
  <li *ngFor="let user of user$ | async">
    {{ user }}
  </li>
</ul>

I'm getting the same error... In Angular version 4 it works but, how to fix that in angular 5.2.0 ??

2
htmlangular

2 Answers

1
votes

The async pipe works with observables as argument. The error clearly states that user$ field is not an observable.

Maybe you wanted to subscribe to the valueChanges() observable of the db.object()?

Take a look here: https://github.com/angular/angularfire2/blob/master/docs/rtdb/objects.md

UPDATE

It seems that AngularFireList<any> is not an Observable, so you would receive the same error.

As I can see in the documentation of the angularfire2, the list() method returns an object in latest version, which has a valueChanges() method. Consider changing the code by calling the valueChanges() method and using the async pipe onto the resulting observable.

More details here: https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md#50

1
votes

You're getting that error because, async pipe works with Observables and the data you're returning is not.

You might want to change your code to this:

user$: Observable<any[]>;

  constructor(db: AngularFireDatabase) {
    this.user$ = db.list("/users").snapshotChanges();
  }

Or this:

constructor(db: AngularFireDatabase) {
   this.user$ = db.list("/users").valueChanges();
}