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

Question

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

Answer 1

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

Answer 2

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

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

Reference docs

Answer 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 }}

Answer 4

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

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

job:Job
job$:Observable<Job>

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

{{job | async }}

代替：

{{job$ | async }}

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

Answer 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>