Angular 4 : InvalidPipeArgument : '[object Object]' pour le tube 'AsyncPipe'.

Question

J'ai besoin de votre aide, j'essaie d'afficher des données à partir de ma base de données mais j'obtiens une erreur du type suivante InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' .

---

Il y a 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');
}

---

Voilà 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 mon carlin :

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

Answer 1

async est utilisé pour se lier aux Observables et aux Promesses, mais il semble que vous vous liez à un objet ordinaire. Vous pouvez simplement supprimer les deux async mots-clés et cela devrait probablement fonctionner.

Answer 2

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 un Observable.

Donc, à titre d'exemple, disons 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 cette façon :

{{job | async }}

au lieu de :

{{job$ | async }}

Vous n'aurez pas besoin de la propriété job:Job si vous utilisez le tuyau asynchrone, mais elle sert à illustrer une cause de l'erreur.

Answer 3

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 ressembler à ceci-

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

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

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

Ensuite, vous pouvez facilement itérer à travers les films sans pipe asynchrone comme les données movies[] ne sont pas de type observable, votre html devrait être ceci

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

si vous décélérez les films comme un

movies: FirebaseListObservable<any[]>;

alors vous devez simplement appeler

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

et votre html devrait être le suivant

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

Answer 4

J'ai trouvé une autre solution pour obtenir les données. selon la documentation Veuillez consulter 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 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>

Answer 5

Vous devez ajouter le tuyau au interpolation et non à la ngFor

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

Documents de référence