Angular 4: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
async
is used for binding to Observables and Promises, but it seems like you're binding to a regular object. You can just remove both async
keywords and it should probably work.
You get this message when you've used async in your template, but are referring to an object that isn't an Observable.
So for examples sake, lets' say I had these properties in my class:
job:Jobjob$:Observable<Job>
Then in my template, I refer to it this way:
{{job | async }}
instead of:
{{job$ | async }}
You wouldn't need the job:Job property if you use the async pipe, but it serves to illustrate a cause of the error.
In your MoviesService you should import FirebaseListObservable in order to define return type FirebaseListObservable<any[]>
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
then get() method should like this-
get (): FirebaseListObservable<any[]>{ return this.db.list('/movies'); }
this get() method will return FirebaseListObervable of movies list
In your MoviesComponent should look like this
export class MoviesComponent implements OnInit { movies: any[]; constructor(private moviesDb: MoviesService) { } ngOnInit() { this.moviesDb.get().subscribe((snaps) => { this.movies = snaps; }); }}
Then you can easily iterate through movies without async pipe as movies[] data is not observable type, your html should be this
ul li(*ngFor='let movie of movies') {{ movie.title }}
if you declear movies as a
movies: FirebaseListObservable<any[]>;
then you should simply call
movies: FirebaseListObservable<any[]>;ngOnInit() { this.movies = this.moviesDb.get();}
and your html should be this
ul li(*ngFor='let movie of movies | async') {{ movie.title }}