Угловой 4: InvalidPipeArgument: '[объект объекта] 'для трубы 'AsyncPipe'

мне нужна ваша помощь, я пытаюсь отобразить некоторые данные из моей firebase, но это trhows меня ошибка, как 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 }}
21
angular angularfire2 observable pipe pug

5 ответов

в вашем 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 }}

если вы declear фильмы как 

movies: FirebaseListObservable<any[]>;

тогда вы должны просто позвонить

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

и ваш HTML должен быть таким

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

async используется для привязки к наблюдаемым и обещаниям, но похоже, что вы привязываетесь к регулярному объекту. Вы можете просто удалить async ключевые слова, и это, вероятно, должно работать.

17

вы получаете это сообщение, когда вы использовали async в своем шаблоне, но ссылаетесь на объект, который не является наблюдаемым.

Итак, для примера, скажем, у меня были эти свойства в моем классе:

job:Job
job$:Observable<Job>

потом в мой шаблон, я называю это так:

{{job | async }}

вместо:

{{job$ | async }}

вам не понадобится свойство job:Job, если вы используете асинхронный канал, но он служит для иллюстрации причины ошибки.

3

Я нашел другое решение для получения данных. согласно документации пожалуйста, проверьте документация ссылке

в файле службы добавьте следующее. 

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

вы должны добавить трубу к interpolation, а не ngFor

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

справочные документы

0