Angular 4: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' Angular 4: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' angular angular

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