angular - error - invalidpipeargument for pipe ''asyncpipe''

Angular 4: InvalidPipeArgument: ''[objeto Object]'' para la tubería ''AsyncPipe''

Question

Necesito su ayuda. Estoy tratando de mostrar algunos datos de mi base de fuego, pero me muestra un error como InvalidPipeArgument: ''[object Object]'' for pipe ''AsyncPipe'' .

Ahí está mi servicio:

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

@Injectable()
export class MoviesService {

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

Ahí está mi componente:

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

Y hay mmy pug:

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

Answer 1

Debe agregar el conducto a la interpolation y no al ngFor

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

Documentos de referencia

Answer 2

En su servicio de películas, debe importar FirebaseListObservable para definir el tipo de devolución FirebaseListObservable<any[]>

import { AngularFireDatabase, FirebaseListObservable } from ''angularfire2/database'';

entonces el método get () debería gustar esto-

get (): FirebaseListObservable<any[]>{
        return this.db.list(''/movies'');
    }

este método get () devolverá FirebaseListObervable de películas de la lista

En tu MoviesComponent debería verse así

export class MoviesComponent implements OnInit {
  movies: any[];

  constructor(private moviesDb: MoviesService) { }

  ngOnInit() {
    this.moviesDb.get().subscribe((snaps) => {
       this.movies = snaps;
   });
 }
}

Entonces puede iterar fácilmente a través de películas sin canalización asíncrona, ya que los datos de mivies [] no son de tipo observable, su HTML debería ser así y su HTML debería ser este

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

si declear películas como

movies: FirebaseListObservable<any[]>;

entonces deberías simplemente llamar

movies: FirebaseListObservable<any[]>;
ngOnInit() {
    this.movies = this.moviesDb.get();
}

y tu html debería ser esto

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

Answer 3

Encontré otra solución para obtener los datos. De acuerdo con la documentación link

En el archivo de servicio agregar siguiente.

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

@Injectable()
export class MoviesService {

  constructor(private db: AngularFireDatabase) {}
  getMovies() {
    this.db.list(''/movies'').valueChanges();
  }
}

En Component agregue lo siguiente.

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

En su archivo html agregue lo siguiente.

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

Answer 4

Recibe este mensaje cuando ha usado async en su plantilla, pero se refiere a un objeto que no es un observable.

Entonces, por ejemplo, digamos que tenía estas propiedades en mi clase:

job:Job
job$:Observable<Job>

Luego en mi plantilla, me refiero a esto de esta manera:

{{job | async }}

en lugar de:

{{job$ | async }}

No necesitaría el trabajo: propiedad del trabajo si utiliza la canalización asíncrona, pero sirve para ilustrar la causa del error.

Answer 5

async se usa para enlazar con Observables y Promesas, pero parece que estás enlazando con un objeto regular. Simplemente puede eliminar ambas palabras clave async y probablemente debería funcionar.