web-dev-qa-db-ja.com

Angular 4：InvalidPipeArgument：パイプ 'AsyncPipe'の '[オブジェクトオブジェクト]'

私はあなたの助けが必要です、私は私の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 }}
angularpipepugobservableangularfire2
35
P_Js

MoviesServiceで、戻り型FirebaseListObservable<any[]>を定義するためにFirebaseListObservableをインポートする必要があります

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 []データは観察可能なタイプではないため、非同期パイプなしでムービーを簡単に反復処理できます。

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 }}
14
Nizam Uddin

asyncはObservablesとPromiseにバインドするために使用されますが、通常のオブジェクトにバインドしているようです。両方のasyncキーワードを削除するだけで、おそらく機能するはずです。

21
Adnan A.

テンプレートでasyncを使用したが、Observableではないオブジェクトを参照している場合、このメッセージが表示されます。

例のために、クラスにこれらのプロパティがあったとしましょう：

job:Job
job$:Observable<Job>

次に、私のテンプレートで、このように参照します。

{{job | async }}

の代わりに：

{{job$ | async }}

非同期パイプを使用する場合、job：Jobプロパティは必要ありませんが、エラーの原因を説明するのに役立ちます。

13
JGFMK

データを取得する別のソリューションを見つけました。ドキュメントに従ってドキュメントを確認してください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>
6
Sanjeet kumar

パイプはinterpolationではなくngForに追加する必要があります

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

リファレンスドキュメント

0
Aravind