Angular 5 - async pipe with firebase - html

Question

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 ??

Answer 1

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

Answer 2

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