Angular 角度4:InvalidPipeArgument:'；[对象对象]'；对于管道'；异步管道&x27；

我需要您的帮助，我正试图显示firebase中的一些数据，但它向我显示了一个错误，如管道“AsyncPipe”的

InvalidPipeArgument:“[object object]”

---

这是我的服务：

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

---

还有我的帕格：

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

---

async

用于绑定到可观察对象和承诺，但它似乎绑定到了常规对象。您可以删除这两个

async

关键字，它可能会起作用。

您应该将管道添加到

插值中，而不是添加到
ngFor

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

在您的电影服务中，您应该导入FirebaseListObservable，以便定义返回类型
FirebaseListObservable

那么get（）方法应该是这样的-

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

然后，您可以轻松地在没有异步管道的情况下迭代电影，因为电影[]数据是不可观察的类型，您的html应该是

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

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

如果你把电影作为一个

movies: FirebaseListObservable<any[]>;

当您在模板中使用async，但引用的对象不是可观察对象时，您会收到此消息

例如，假设我的类中有以下属性：

job:Job
job$:Observable<Job>

而不是：

{{job$ | async }}

如果使用异步管道，则不需要job:job属性，但它可以说明错误的原因。
我找到了另一种获取数据的解决方案。根据文档，请检查文档

在服务文件中添加以下内容。

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

@Injectable()
export class MoviesService {

  constructor(private db: AngularFireDatabase) {}
  getMovies() {
    this.db.list('/movies').valueChanges();
  }
}

在组件中添加以下内容。

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$;

  constructor(private moviesDb: MoviesService) { 
   this.movies$ = moviesDb.getMovies();
 }

<li  *ngFor="let m of movies$ | async">{{ m.name }} </li>

在html文件中添加以下内容。

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$;

  constructor(private moviesDb: MoviesService) { 
   this.movies$ = moviesDb.getMovies();
 }

<li  *ngFor="let m of movies$ | async">{{ m.name }} </li>

{{{m.name}
首先我没有像这样做
ngOnInit（）{this.moviesDb.get（）.subscribe（（snap）=>{this.movies=snap；console.log（this.movies）；}
我有一个
无效管道参数：'[object object object]，[object object object]，[object object object]，[object object object]，[object object]，[object]，[object object]'用于管道“AsyncPipe”
但您绑定的是该可观察对象的发出值，而不是
subscribe
方法中的可观察对象本身<代码>电影

不是一个可观察的类型，它是

any[]

类型；构造函数（私有moviesDb:MoviesService）{}很抱歉，我不太理解它，所以我应该怎么做？只需删除

async

。两者都有。它正在为Ag网格实现工作。最初它显示错误，因此从tempalte中删除| async键。如果删除async键，则会出现此错误：

找不到类型为“object”的不同支持对象“[object object]”。NgFor只支持绑定到诸如数组之类的Iterables。

我按照angularfire2的文档中提到的那样做了：通过

控制台检查服务中的数据。log

如果它是一个对象数组或不是，我更喜欢这个答案，因为它从一个通用的角度清楚地解释了这个问题。对于任何正在寻找像这样导入的新AngularFireDatabase模块的人来说，这是正确的答案：“从'@angular/fire/database'导入{AngularFireDatabase}；”谢谢！这是我的版本的正确答案--angularfire2@5.1.1

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$;

  constructor(private moviesDb: MoviesService) { 
   this.movies$ = moviesDb.getMovies();
 }

<li  *ngFor="let m of movies$ | async">{{ m.name }} </li>