Angular 4 InvalidPipeArgument object Object for pipe AsyncPipe

Question

i need your help  i m trying to display some datas from my firebase but it trhows me an error like InvalidPipeArgument    object Object   for pipe  AsyncPipe      There is my service    import   Injectable   from   angular core   import   AngularFireDatabase   from  angularfire2 database     Injectable   export class MoviesService      constructor private db  AngularFireDatabase       get        gt  this db list   movies          There is my component   import   Component  OnInit   from   angular core   import   MoviesService   from    movies service     Component     selector   app-movies     templateUrl     movies component html     styleUrls      movies component css      export class MoviesComponent implements OnInit     movies  any       constructor private moviesDb  MoviesService         ngOnInit         this moviesDb get   subscribe  snaps    gt          snaps forEach  snap    gt            this movies   snap          console log this movies                             And there is mmy pug   ul   li  ngFor  let movie of  movies   async             movie title   async

User · Answer

You should add the pipe to the interpolation and not to the ngFor  ul   li  ngFor  let movie of  movies               removed here                             movie title   async      Reference docs

User · Answer

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

User · Answer

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 Job job  Observable lt Job gt    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

User · Answer

I found another solution to get the data  according to the documentation Please check documentation link  In service file add following     import   Injectable   from   angular core   import   AngularFireDatabase   from  angularfire2 database     Injectable   export class MoviesService      constructor private db  AngularFireDatabase       getMovies         this db list   movies   valueChanges            In Component add following   import   Component  OnInit   from   angular core   import   MoviesService   from    movies service     Component     selector   app-movies     templateUrl     movies component html     styleUrls      movies component css      export class MoviesComponent implements OnInit     movies      constructor private moviesDb  MoviesService        this movies    moviesDb getMovies         In your html file add following    lt li   ngFor  let m of movies    async  gt    m name     lt  li gt

User · Answer

In your MoviesService you should import FirebaseListObservable in order to define return type FirebaseListObservable lt any   gt  import   AngularFireDatabase  FirebaseListObservable   from  angularfire2 database    then get   method should like this- get     FirebaseListObservable lt any   gt           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    gt           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 lt any   gt    then you should simply call movies  FirebaseListObservable lt any   gt   ngOnInit         this movies   this moviesDb get       and your html should be this ul   li  ngFor  let movie of movies   async          movie title

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

Examples related to angular

Examples related to pipe

Examples related to pug

Examples related to observable

Examples related to angularfire2