Angular 4：InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”

Posted 2023-02-19

【中文标题】Angular 4：InvalidPipeArgument：管道“AsyncPipe”的“[object Object]”

【英文标题】：Angular 4: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

【发布时间】：2017-12-05 13:47:20

【问题描述】：

我需要你的帮助，我正在尝试显示我的 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 pug：

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

【问题讨论】：

首先我没有喜欢这个ngOnInit() this.moviesDb.get().subscribe((snap) => this.movies = snap; console.log(this.movies); ); ，我有那个InvalidPipeArgument: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe 'AsyncPipe'

【参考方案1】：

async 用于绑定到 Observables 和 Promises，但看起来你正在绑定到一个常规对象。您可以删除两个 async 关键字，它应该可以工作。

【讨论】：

但是你绑定到那个 Observable 的发射值，而不是绑定到 subscribe 方法中的 observable 本身。 Movies 不是 Observable 类型，它是 any[] 类型。

我输入了movies: any[]; constructor(private moviesDb: MoviesService) 抱歉我不太明白，那我该怎么办？

只需删除async。他们两个。

它正在为 Ag-Grid 实施工作。最初它显示错误，所以删除|来自模板的异步键。，

【参考方案2】：

您应该将管道添加到interpolation 而不是ngFor

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

Reference docs

【讨论】：

如果我删除异步我有这个错误：Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. 我做了 angularfire2 文档中提到的：github.com/angular/angularfire2

通过console.log检查服务中的数据是否为对象数组

【参考方案3】：

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

import  AngularFireDatabase, FirebaseListObservable  from 'angularfire2/database';

那么 get() 方法应该是这样的-

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

此 get() 方法将返回电影列表的 FirebaseListObervable

在你的 MoviesComponent 中应该是这样的

export class MoviesComponent implements OnInit 
  movies: any[];

  constructor(private moviesDb: MoviesService)  

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

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

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

如果您将电影取消为

movies: FirebaseListObservable<any[]>;

那么你应该简单地调用

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

你的 html 应该是这样的

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

【讨论】：

请注意，在最新版本的 Angular Fire 数据库中，“FirebaseListObservable”已被弃用。作为替代方案，您可以改用“AngularFireList”，但请注意，如果不是多余的，它是可选的。 import AngularFireDatabase , AngularFireList from '@angular/fire/database'; 此外，在最新版本的 Angular fire 中，您使用 valueChanges()，而不是在组件的构造函数中使用 subscribe。查看更多github.com/angular/angularfire/blob/…

【参考方案4】：

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

因此，举个例子，假设我的班级中有这些属性：

job:Job
job$:Observable<Job>

然后在我的模板中，我是这样引用它的：

job | async 

代替：

job$ | async 

如果您使用异步管道，则不需要 job:Job 属性，但它可以说明错误的原因。

【讨论】：

我比接受的答案更喜欢这个答案，因为它从一般的角度清楚地解释了这个问题。

【参考方案5】：

我找到了另一种获取数据的解决方案。根据文档 请查看文档 link

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

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

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

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

【讨论】：

对于寻找像这样导入的新 AngularFireDatabase 模块的人来说，这是正确的答案：“import AngularFireDatabase from '@angular/fire/database';”

谢谢！这是我的版本的正确答案——angularfire2@5.1.1