Winkel-4: InvalidPipeArgument: '[object]' Rohr 'AsyncPipe'

ich brauche Eure Hilfe, ich versuche auf dem display einige Daten aus meiner FB, aber es trhows mir eine Fehlermeldung wie InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'.

Gibt es mein service: 

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

@Injectable()
export class MoviesService {

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

Es ist meine Komponente:

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

Und es ist mmy Mops:

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

InformationsquelleAutor der Frage P_Js | 2017-07-01

  1. 8

    In Ihrem MoviesService importieren Sie FirebaseListObservable, um zu definieren, Rückgabetyp FirebaseListObservable<any[]>

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

    dann get () - Methode sollte wie diese-

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

    diese get () - Methode zurück FirebaseListObervable Filme Liste

    In Ihrem MoviesComponent sollte wie folgt Aussehen

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

  constructor(private moviesDb: MoviesService) { }

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

    Dann können Sie ganz einfach Durchlaufen werden, Filme ohne async-Rohr als mivies[] Daten nicht beobachtbare Art, Ihre html sollte wie dieser
    und Ihr html sollte dies

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

    wenn Sie declear Filme als 

    movies: FirebaseListObservable<any[]>;

    dann sollten Sie rufen Sie einfach

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

    und Ihre html sollte dies

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

    InformationsquelleAutor der Antwort Nizam Uddin

  2. 17

    async ist für die Bindung verwendet, um Observablen und Verspricht, aber es scheint, Sie verbindlich zu einem regulären Objekt. Sie können einfach entfernen Sie die beiden async keywords und sollte es wohl auch funktionieren.

    InformationsquelleAutor der Antwort Adnan A.

  3. 3

    Erhalten Sie diese Meldung, wenn Sie verwendet haben, async in Ihrer Vorlage, sondern bezieht sich auf ein Objekt, das nicht Beobachtbar ist.

    So für Beispiele Willen, die können' sagen, ich hatte diese Eigenschaften in meiner Klasse:

    job:Job
job$:Observable<Job>

    Dann in meine Vorlage, die ich beziehen sich auf es auf diese Weise:

    {{job | async }}

    statt:

    {{job$ | async }}

    Würden Sie nicht brauchen den job:Job-Eigenschaft wenn Sie die async-Leitung, aber es dient der Veranschaulichung einer Ursache für den Fehler.

    InformationsquelleAutor der Antwort JGFMK

  4. 1

    Ich eine andere Lösung gefunden um die Daten zu erhalten. laut der Dokumentation Bitte überprüfen Sie die Dokumentation link

    In der service-Datei fügen Sie die folgende. 

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

@Injectable()
export class MoviesService {

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

    In der Komponente hinzufügen, die folgenden.

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

    In Ihrer html-Datei fügen Sie die folgende.

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

    InformationsquelleAutor der Antwort Sanjeet kumar

  5. 0

    Sollten Sie das Rohr auf die interpolation und nicht auf die ngFor

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

    Referenz docs

    InformationsquelleAutor der Antwort Aravind

Schreibe einen Kommentar