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

---

还有一个mmy的哈巴狗:

---

And there is mmy pug:

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

推荐答案

在MoviesService中，您应该导入FirebaseListObservable以便定义返回类型FirebaseListObservable<any[]>

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

然后，您可以轻松地遍历电影而无需异步管道，因为mivies []数据不是可观察类型，因此您的html应该是这样的 而您的html应该是这个

Then you can easily iterate through movies without async pipe as mivies[] data is not observable type, your html should like this and 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 }}

这篇关于角度4:InvalidPipeArgument:管道"AsyncPipe"的"[object Object]"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！