Angular 4: InvalidPipeArgument: '[Object Object]' dla potoku 'AsyncPipe'

Question

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

---

Jest mój serwis:

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

Answer 1

W swojej MoviesService należy importować FirebaseListObservable aby określić typ zwracany FirebaseListObservable<any[]>

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

następnie get() method shou ld jak to-

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

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

W swojej MoviesComponent powinien wyglądać ten

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

    constructor(private moviesDb: MoviesService) { } 

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

Następnie można łatwo iterację filmów bez rury asynchronicznym ponieważ dane mivies [] nie są typem obserwowalnym, Twój html powinien polubić ten numer: , a Twój html powinien być taki:

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

jeśli declear filmów jako

movies: FirebaseListObservable<any[]>; 

to należy po prostu zadzwonić

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

a html powinno być to

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

Answer 2

async służy do wiązania Obserables i Obietnic, ale wygląda na to, że wiążemy zwykły obiekt. Możesz po prostu usunąć oba słowa kluczowe async i prawdopodobnie powinno działać.

Answer 3

Należy dodać rurę do interpolation a nie do ngFor

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

Reference docs

Answer 4

pojawi się ten komunikat, kiedy już używany asynchronizuj w swoim szablonie, ale odnoszą się do obiektu, który nie jest obserwowalny.

Więc dla przykładów sake, pozwala powiedzieć, że miał te właściwości w mojej klasie:

job:Job 
job$:Observable<Job> 

Wtedy w moim szablonu, odnoszę się do niego 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 t on błąd.