Angular 4：InvalidPipeArgument：'[object Object]'管道'AsyncPipe'

Question

我需要你的帮助，我试图从我的firebase显示一些数据，但它会显示一个错误，如InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'。

---

还有就是我的服务：

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

@Injectable() 
export class MoviesService { 

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

---

有我的组件：

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

---

而且有MMY哈巴狗：

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

Answer 1

在你MoviesService你应该导入FirebaseListObservable以确定返回类型FirebaseListObservable<any[]>

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

then get（）method shou像这个 -

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

这个GET LD（）方法将返回FirebaseListObervable的电影列表

在你MoviesComponent应该是这样的

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

    constructor(private moviesDb: MoviesService) { } 

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

然后你就可以通过无异步管电影轻松地重复由于mivies []数据是不可观察的类型，您的html应该如此 和您的html应该是这个

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

如果你declear电影作为

movies: FirebaseListObservable<any[]>; 

，那么你应该简单地调用

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

，你的HTML应该是这样的

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

Answer 2

async用于绑定到Observables和Promises，但它看起来像你绑定到一个普通的对象。您可以删除两个async关键字，它应该可能工作。

Answer 3

你应该管添加到interpolation，而不是到ngFor

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

Reference docs

Answer 4

你得到这个消息时所使用在模板中是异步的，但是指的是不是可观察的对象。

所以对实例的缘故，让说我在我的班级这些属性：

job:Job 
job$:Observable<Job> 

然后在我的模板，我指的是这样：

{{job | async }} 

代替：

{{job$ | async }} 

如果您使用异步管道，您将不需要该作业：Job属性，但它用来说明导致t他错了。