web-dev-qa-db-fra.com

Angular 4: InvalidPipeArgument: '[objet Object]' pour le tuyau 'AsyncPipe'

j'ai besoin de votre aide, j'essaie d'afficher des données de mon firebase mais cela me révèle une erreur comme InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'.

Voici 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 y a 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 y a mmy carlin:

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

Dans votre MoviesService, vous devez importer FirebaseListObservable afin de définir le type de retour FirebaseListObservable<any[]>

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

alors la méthode get () devrait aimer ceci-

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

cette méthode get () retournera FirebaseListObervable de la liste des films

Dans vos films, le composant devrait ressembler à ceci

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

  constructor(private moviesDb: MoviesService) { }

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

Ensuite, vous pouvez facilement parcourir des films sans canal asynchrone, car les données mivies [] ne sont pas de type observable, votre code HTML doit aimer ceci et votre code HTML doit être le suivant.

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

si vous décédez des films en tant que

movies: FirebaseListObservable<any[]>;

alors vous devriez simplement appeler

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

et votre html devrait être ceci

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

async est utilisé pour la liaison aux observables et aux promesses, mais il semble que vous vous liez à un objet normal. Vous pouvez simplement supprimer les deux mots-clés async et cela devrait probablement fonctionner.

21
Adnan A.

Vous obtenez ce message lorsque vous utilisez async dans votre modèle, mais que vous faites référence à un objet qui n'est pas un observable.

Donc, à titre d'exemple, supposons que j'ai ces propriétés dans ma classe:

job:Job
job$:Observable<Job>

Ensuite, dans mon modèle, j'y fais référence de la manière suivante:

{{job | async }}

au lieu de:

{{job$ | async }}

Si vous utilisez le canal asynchrone, vous n’auriez pas besoin de la propriété job: Job, mais elle sert à illustrer la cause de l’erreur.

13
JGFMK

J'ai trouvé une autre solution pour obtenir les données. selon la documentation Veuillez vérifier la documentation lien

Dans le fichier de service, ajoutez 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 le composant, ajoutez 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, ajoutez ce qui suit: 

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

Vous devez ajouter le tuyau au interpolation et non au ngFor

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

Documents de référence

0
Aravind