Angulaire 4: InvalidPipeArgument: '[object object] " pour tuyau 'AsyncPipe'
j'ai besoin de votre aide, je vais essayer d'afficher des données à partir de mon firebase mais il trhows moi une erreur comme InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'.
Il est à mon service:
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
@Injectable()
export class MoviesService {
constructor(private db: AngularFireDatabase) {}
get = () => this.db.list('/movies');
}
Il est mon composant:
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);
});
});
}
}
Et il n'y a mmy carlin:
ul
li(*ngFor='let movie of (movies | async)')
| {{ movie.title | async }}
5 réponses
dans votre MoviesService vous devez importer FirebaseListObservable afin de définir le type de retour FirebaseListObservable<any[]>
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
puis la méthode get() devrait comme celui-ci
get (): FirebaseListObservable<any[]>{
return this.db.list('/movies');
}
cette méthode get () retournera FirebaseListObervable of movies list
Dans votre MoviesComponent devrait ressembler à ceci
export class MoviesComponent implements OnInit {
movies: any[];
constructor(private moviesDb: MoviesService) { }
ngOnInit() {
this.moviesDb.get().subscribe((snaps) => {
this.movies = snaps;
});
}
}
alors vous pouvez facilement itérer à travers des films sans pipe async comme mivies [] les données ne sont pas observables type, votre html devrait aimer ceci et votre html doit être ce
ul
li(*ngFor='let movie of movies')
{{ movie.title }}
si vous declear les films comme un
movies: FirebaseListObservable<any[]>;
alors vous devriez simplement appeler
movies: FirebaseListObservable<any[]>;
ngOnInit() {
this.movies = this.moviesDb.get();
}
et votre html devrait être celui-ci
ul
li(*ngFor='let movie of movies | async')
{{ movie.title }}
async est utilisé pour se lier aux Observables et aux promesses, mais il semble que vous vous liez à un objet régulier. Vous pouvez simplement supprimer les deux async mots-clés et cela devrait probablement fonctionner.
vous obtenez ce message lorsque vous avez utilisé async dans votre modèle, mais que vous faites référence à un objet qui n'est pas Observable.
alors, par exemple, disons que j'avais ces propriétés dans ma classe:
job:Job
job$:Observable<Job>
Puis dans mon modèle, j'en parle de cette façon:
{{job | async }}
au lieu de:
{{job$ | async }}
vous n'auriez pas besoin de la propriété job:Job si vous utilisez la pipe async, mais elle sert à illustrer une cause de l'erreur.
j'ai trouvé une autre solution pour obtenir les données. selon la documentation Veuillez consulter la documentationlien
en service ajouter ce qui suit.
import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
@Injectable()
export class MoviesService {
constructor(private db: AngularFireDatabase) {}
getMovies() {
this.db.list('/movies').valueChanges();
}
}
dans la composante ajouter ce qui suit.
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();
}
dans votre fichier html ajouter ce qui suit.
<li *ngFor="let m of movies$ | async">{{ m.name }} </li>
vous devriez ajouter le tuyau à la interpolation et pas <à la!--2-->
ul
li(*ngFor='let movie of (movies)') ///////////removed here///////////////////
| {{ movie.title | async }}