Angular 4:InvalidPipeArgument:管道“AsyncPipe"的“[object Object]" [英] Angular 4: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
问题描述
我需要你的帮助,我正在尝试显示来自我的 Firebase 的一些数据,但它向我显示了一个错误,例如 InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
.
i need your help, i'm trying to display some datas from my firebase but it trhows me an error like 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');
}
<小时>
有我的组件:
There is my component:
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);
});
});
}
}
<小时>
还有我的哈巴狗:
And there is mmy pug:
ul
li(*ngFor='let movie of (movies | async)')
| {{ movie.title | async }}
推荐答案
在你的 MoviesService 你应该导入 FirebaseListObservable 来定义返回类型 FirebaseListObservable
In your MoviesService you should import FirebaseListObservable in order to define return type FirebaseListObservable<any[]>
import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
然后 get() 方法应该是这样的-
then get() method should like this-
get (): FirebaseListObservable<any[]>{
return this.db.list('/movies');
}
这个 get() 方法将返回电影列表的 FirebaseListObervable
this get() method will return FirebaseListObervable of movies list
在你的 MoviesComponent 中应该是这样的
In your MoviesComponent should look like this
export class MoviesComponent implements OnInit {
movies: any[];
constructor(private moviesDb: MoviesService) { }
ngOnInit() {
this.moviesDb.get().subscribe((snaps) => {
this.movies = snaps;
});
}
}
然后您可以轻松地在没有异步管道的情况下遍历电影,因为电影 [] 数据不是可观察类型,您的 html 应该是这样的
Then you can easily iterate through movies without async pipe as movies[] data is not observable type, your html should be this
ul
li(*ngFor='let movie of movies')
{{ movie.title }}
如果您将电影定义为
movies: FirebaseListObservable<any[]>;
那么你应该简单地调用
movies: FirebaseListObservable<any[]>;
ngOnInit() {
this.movies = this.moviesDb.get();
}
你的html应该是这个
and your html should be this
ul
li(*ngFor='let movie of movies | async')
{{ movie.title }}
这篇关于Angular 4:InvalidPipeArgument:管道“AsyncPipe"的“[object Object]"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!