Pytanie Angular 4: InvalidPipeArgument: '[object Object]' dla rury 'AsyncPipe'


potrzebuję twojej pomocy, próbuję wyświetlić niektóre dane z mojej bazy, ale powoduje to błąd podobny do tego InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'.


Moja usługa:

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

@Injectable()
export class MoviesService {

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

Jest mój komponent:

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

I jest mmy mops:

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

18
2017-07-01 23:05


pochodzenie


Najpierw zrobiłem bez tego ngOnInit() { this.moviesDb.get().subscribe((snap) => { this.movies = snap; console.log(this.movies); }); } i miałem to InvalidPipeArgument: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe 'AsyncPipe' - P_Js


Odpowiedzi:


W usłudze MoviesService należy zaimportować FirebaseListObservable w celu zdefiniowania typu zwrotu FirebaseListObservable<any[]>

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

wtedy metoda get () powinna się podobać

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

ta metoda get () zwróci FirebaseListObervable z listy filmów

W twoim MoviesComponent powinien wyglądać tak

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

  constructor(private moviesDb: MoviesService) { }

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

Następnie możesz łatwo iterować przez filmy bez rurek asynchronicznych, tak jak w mivies [] dane nie są typem obserwowalnym, twój html powinien to lubić a twój html powinien być tym

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

jeśli oceniasz filmy jako

movies: FirebaseListObservable<any[]>;

wtedy powinieneś po prostu zadzwonić

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

a twój html powinien być tym

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

8
2017-07-02 08:11



Wielkie dzięki !!! teraz działa - P_Js


async jest używany do wiązania Observables i Promises, ale wydaje się, że jesteś wiążący dla zwykłego obiektu. Możesz po prostu usunąć oba async słowa kluczowe i prawdopodobnie powinno działać.


13
2017-07-01 23:16



this.db.list('/movies') to jest prawo obserwowalne? - P_Js
Ale wiążesz się z emitowaną wartością tego Obserwowalnego, a nie z obserwowalnym w systemie subscribe metoda. Movies nie jest typem obserwowalnym, to jest any[] rodzaj. - Adnan A.
włożyłem movies: any[]; constructor(private moviesDb: MoviesService) { } przepraszam, nie rozumiem tego dobrze, więc co mam zrobić? - P_Js
Po prostu usuń async. Oboje. - Adnan A.
Zrozumiałem teraz, co wcześniej powiedziałeś, dzięki - P_Js


Otrzymujesz tę wiadomość, gdy używasz asynchronizacji w swoim szablonie, ale odnoszą się one do obiektu, który nie jest obserwowalny.

Na przykład dla przykładu, powiedzmy, że mam te właściwości w mojej klasie:

job:Job
job$:Observable<Job>

Następnie w moim szablonie odnoszę się do tego w ten sposób:

{{job | async }}

zamiast:

{{job$ | async }}

Nie potrzebujesz pracy: Właściwość zadania, jeśli używasz rury asynchronicznej, ale służy ona do zilustrowania przyczyny błędu.


3
2017-08-19 20:26



Ta odpowiedź jest lepsza od akceptowanej, ponieważ wyraźnie wyjaśnia to zagadnienie z ogólnego punktu widzenia. - Oscar Vasquez


Powinieneś dodać rurkę do interpolation a nie do ngFor

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

Dokumenty referencyjne


0
2017-07-02 01:13



jeśli usunę asynchronicznie, mam ten błąd: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Zrobiłem tak, jak zostało wspomniane w dokumencie angularfire2: github.com/angular/angularfire2 - P_Js
sprawdź dane z usługi według console.log jeśli jest to tablica obiektów, czy nie - Aravind


Znalazłem inne rozwiązanie, aby uzyskać dane. zgodnie z dokumentacją Sprawdź dokumentację  połączyć

W pliku usługi dodaj kolejne. 

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

@Injectable()
export class MoviesService {

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

W komponencie dodaj kolejne.

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

W swoim pliku html dodaj kolejne.

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

0
2018-06-04 12:40