Angular 4: InvalidPipeArgument: '[объект объекта]' для канала 'AsyncPipe'

Мне нужна твоя помощь, я пытаюсь отобразить некоторые данные из моей базы данных, но это выдает мне ошибку вроде 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 }}
Источник

7 ответов

Решение

В вашем 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 }}
Источник

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

Источник

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

Для примера, допустим, у меня были следующие свойства в моем классе:

job:Job
job$:Observable<Job>

Затем в моем шаблоне я называю это следующим образом:

{{job | async }}

вместо:

{{job$ | async }}

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

Источник

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

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

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>
Источник

Наблюдаемые > Сигналы

Если вы конвертировали код из использованияObservableкsignalвы можете столкнуться со следующим вариантом ошибки:

      Error: NG02100: InvalidPipeArgument: 'function () { [native code] }' for pipe 'AsyncPipe'

Часть «собственного кода» на первый взгляд выглядит немного пугающе, но это просто строковое представление сигнала с его уникальным символом.

Просто щелкните первую строку кода в сообщении об ошибке, похожем на ваше, чтобы найти, где в шаблоне вы переключились с помощью сигнала, но не обновилиasyncтрубка.

Итак, раньше у вас могло быть:

      favoriteColor: Observable<string>;

{{ favoriteColor | async }}

Теперь в качестве сигнала должно быть:

      favoriteColor: Signal<string>;

{{ favoriteColor() }}
Источник

Хорошо, у меня была похожая проблема, теперь я решил ее, поэтому позвольте мне объяснить, что вы можете сделать, но сначала я не знаю, какую версию angular вы используете, поэтому метод может отличаться. Я добавляю свою версию установки ниже

      Angular CLI: 13.3.1
Node: 16.14.2
Package Manager: npm 8.5.0
OS: win32 x64

Angular: 13.3.1
... animations, cli, common, compiler, compiler-cli, core, forms    
... platform-browser, platform-browser-dynamic, router

Package                         Version

    @angular-devkit/architect       0.1303.1
@angular-devkit/build-angular   13.3.1
@angular-devkit/core            13.3.1
@angular-devkit/schematics      13.3.1
@angular/fire                   7.3.0
@schematics/angular             13.3.1
rxjs                            7.5.5
typescript                      4.6.3

1 Первое изменение — это ваш служебный файл, измените его с

К этому

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

Я не профессионал, но я решил это так, и надеюсь, что это сработает и для вас.

Источник

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

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

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

Источник
Другие вопросы по тегам