Geek Answers Handbook

Ionic and Firebase - InvalidPipeArgument: '[object Object]' for the 'AsyncPipe' channel

I am having a problem with a basic CRUD to-do application using Ionic 3 and Firebase to work.

The error message I'm stuck on:

Unprepared (in promise): Error: InvalidPipeArgument: "Object object" for the "AsyncPipe" channel

The error message started when I added a section <ion-item *ngFor="let item of shoppingListRef$ | async">to shopping-list.html:

Commerce-list.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>Shopping List</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="navigateToAddShoppingPage()">
        <ion-icon name="add"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let item of shoppingListRef$ | async">
      <h2>Item Name: {{item.itemName}}</h2>
      <h3>Amount: {{item.itemNumber}}</h3>
    </ion-item>
  </ion-list>
</ion-content>

I tried commenting out the code between <ion-item>and </ion-item>in the file above and removing the error message. However, I can’t understand how to fix it.

Here are some related files.

shopping-list.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';

import { AddShoppingPage } from '../add-shopping/add-shopping';
import { ShoppingItem } from '../../models/shopping-item/shopping-item.interface';

@Component({
  selector: 'page-shopping-list',
  templateUrl: 'shopping-list.html',
})
export class ShoppingListPage {

  shoppingListRef$: FirebaseListObservable<ShoppingItem[]>

  constructor(public navCtrl: NavController, public navParams: NavParams, private database: AngularFireDatabase) {
    this.shoppingListRef$ = this.database.list('shopping-list');
  }

  navigateToAddShoppingPage() {
    this.navCtrl.push(AddShoppingPage)
  }
}

shopping-item.interface.ts

export interface ShoppingItem {
    itemName: string;
    itemNumber: number;
}

Thanks in advance for any ideas / help you may have!

+6
2

, angularfire2, 5, :

import { Component } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-shopping-list',
  templateUrl: 'shopping-list.html',
})
export class ShoppingListPage {
 shoppingListRef$: Observable<any[]>;
  constructor(database: AngularFireDatabase) {
    this.shoppingListRef$ = this.database.list('shopping-list').valueChanges();;
  }
}

5 database.list , , async. valueChanges(), Observable .

+5
  <ion-list *ngIf="shoppingListRef$ | async; let shoppingListRef">
    <ion-item *ngFor="let item of shoppingListRef">
      <h2>Item Name: {{item.itemName}}</h2>
      <h3>Amount: {{item.itemNumber}}</h3>
    </ion-item>
  </ion-list>
0

More articles:


All Articles