Angular 4:InvalidPipeArgument:管道'AsyncPipe'的'[object Object]'

Question

我需要你的帮助,我正试图从我的火力显示器中显示一些数据,但它却给我一个错误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);
      });
   });
 }
}

---

有一个嗯哈巴狗:

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

Answer 1

async用于绑定到Observables和Promises,但似乎你绑定到常规对象.你可以删除这两个async关键字,它应该可以工作.

Answer 2

在您的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;
   });
 }
}

然后你可以很容易地迭代电影没有异步管道因为mivies []数据不是可观察的类型,你的html应该是这样的,你的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 3

当您在模板中使用async时,会收到此消息,但是指的是不是Observable的对象.

所以为了举个例子,让我们说我在班上有这些属性:

job:Job
job$:Observable<Job>

然后在我的模板中,我这样称道:

{{job | async }}

代替:

{{job$ | async }}

如果使用异步管道,则不需要作业:作业属性,但它用于说明错误的原因.

Answer 4

我找到了另一种获取数据的解决方案。根据文档，请检查文档 链接

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

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>