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

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.

<li  *ngFor="let m of movies$ | async">{{ m.name }} </li>

Ok I had a similar problem now I solved it so let me explain what you can do but first I don't know which version of angular you are using so the method can be different I am adding my setup version below

Angular CLI: 13.3.1
Node: 16.14.2
Package Manager: npm 8.5.0
OS: win32 x64

Angular: 13.3.1
... animations, cli, common, compiler, compiler-cli, core, forms    
... platform-browser, platform-browser-dynamic, router

Package                         Version

    @angular-devkit/architect       0.1303.1
@angular-devkit/build-angular   13.3.1
@angular-devkit/core            13.3.1
@angular-devkit/schematics      13.3.1
@angular/fire                   7.3.0
@schematics/angular             13.3.1
rxjs                            7.5.5
typescript                      4.6.3

1 First change is your service file, change it from

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

    @Injectable()
    export class MoviesService {

      constructor(private db: AngularFireDatabase) {}
      get = () => this.db.list('/movies');
    }

To this,

    import { Injectable } from '@angular/core';
    import { AngularFireDatabase } from 'angularfire2/database';

    @Injectable()
    export class MoviesService {

      constructor(private db: AngularFireDatabase) {}
      get(): Observable<any[]>{
          return this.db.list('/movies')
      } 
    }

Note:- Don't forget to import Observable from proper module

Then change your component from this

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) => {
          snaps.forEach((snap) => {
            this.movies = snap;
            console.log(this.movies);
          });
       });
     }
    }

To something like this

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.movies$ = this.moviesDb.get()
        .subscribe((snaps) => {
          snaps.forEach((snap) => {
            this.movies$ = snap;
            console.log(this.movies$);
          });
       });
     }
    }

And your last file from this

ul
   li(*ngFor='let movie of (movies | async)')
      | {{ movie.title | async }}

To this

ul
    li(*ngFor='let movie of (movies | async)')
        | {{ movie.title }}

I am not a pro but I solved it this way and hope it works for you too