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

我需要你的幫助，我試圖從我的firebase顯示一些數據，但它會顯示一個錯誤，如InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'。Angular 4：InvalidPipeArgument：'[object Object]'管道'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 }}

來源

2017-07-01 P_Js

首先我沒有沒有這樣'ngOnInit（）{ this.moviesDb.get（）訂閱（（SNAP）=> { this.movies =管理單元; 的console.log（this.movies）; } ）;我有'InvalidPipeArgument：'[object object]，[object object]，[object object]，[object object]，[object object]，[object object]，[object object]，[object Object] ，'object object]'管'AsyncPipe'' –

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

來源

2017-07-02 08:11:48

非常感謝！現在它的工作 –

async用於綁定到Observables和Promises，但它看起來像你綁定到一個普通的對象。您可以刪除兩個async關鍵字，它應該可能工作。

來源

2017-07-01 23:16:15

'this.db.list（'/ movies'）'是一個可觀察的權利？ –

但是您綁定的是Observable的發射值，而不是'subscribe'方法中的observable本身。「電影」不是可觀察類型，它是任何[]類型。 –

我把'電影：任何[]; 構造函數（私人moviesDb：MoviesService）{}'對不起，我不明白，所以我該怎麼辦？ –

你應該管添加到interpolation，而不是到ngFor

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

Reference docs

來源

2017-07-02 01:13:14 Aravind

如果我刪除異步我有這個錯誤：'無法找到類型'對象'不同的支持對象'[對象對象]'。 NgFor只支持綁定到Array之類的Iterables.'我按照在angularfire2的文檔中提到的那樣做了：https://github.com/angular/angularfire2 –

如果是'console.log'，檢查服務中的數據，對象數組 – Aravind

你得到這個消息時所使用在模板中是異步的，但是指的是不是可觀察的對象。

所以對實例的緣故，讓說我在我的班級這些屬性：

job:Job 
job$:Observable<Job>

然後在我的模板，我指的是這樣：

{{job | async }}

代替：

{{job$ | async }}

如果您使用異步管道，您將不需要該作業：Job屬性，但它用來說明導致t他錯了。

來源

2017-08-19 20:26:38 JGFMK

我喜歡這個答案比接受的更好，因爲它從一個通用的角度清楚地解釋了這個問題。 –

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

回答

相關問題