[解決済み] Angular 4: パイプ 'AsyncPipe' に対する InvalidPipeArgument: '[object Object]' です。

質問

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

そして、私のパグがいます。

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

解決方法は？

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

すると、movies[] のデータは observable 型ではないので、非同期パイプを使わずに簡単にムービーを反復処理できるようになり、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 }}