Error with Ionic 3, Firebase and angularfire2

Question

I've got the following error message:

ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'
Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

when I try to list data from my firebase DB, and I don't know why. See my codes, my related deps:

"@ionic-native/core": "~4.9.2",
...
"angularfire2": "^5.0.0-rc.11",
"firebase": "^5.2.0",
"ionic-angular": "3.9.2",
"rxjs": "^6.2.2",
"rxjs-compat": "^6.2.2",

my service:

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Item } from './../../models/item/item.model';

@Injectable()
export class ShoppingListService {

  private shoppingListRef;
  constructor(private db: AngularFireDatabase) {
    this.shoppingListRef = this.db.list<Item>('shopping-list');
  }

  getShoppingList() {
    return this.shoppingListRef;
  }

}

my component:

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .snapshotChanges()
    .subscribe(changes => {
      return changes.map(change => {
        let retorno = {
          key: change.payload.key,
          ...change.payload.val()
        };
        return retorno;
      });
    });
  }
...

And finally my template:

<ion-item *ngFor="let item of shoppingList$ | async">
   {{item.name}}
</ion-item>

I've got the same error if I remove the async pipe. And I've been tried this question without success: Angular 4: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Any idea what am I doing wrong? Thanks in advance.

score 0 · Accepted Answer · answered Jul 26 '18 at 03:57

That's the old way to retrieve data from angularfire2, now I make it work just with this:

in my component:

...
export class HomePage implements OnInit {

  shoppingList$: Observable<Item[]>

  constructor(
    public navCtrl: NavController,
    private shopping: ShoppingListService
  ) {}

  ngOnInit() {
    this.shoppingList$ = this.shopping
    .getShoppingList()
    .valueChanges();
  }
...

And all works fine.

Error with Ionic 3, Firebase and angularfire2

1 Answers1