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.