How to use the AngularFireList to display list in html

Question

I am able to save to firebase but could not retrieve the items as a list. It gives me the error as such: Uncaught(in promise): Error: InvalidPipeArgument'[Object.Object]' for pipe 'AsyncPipe'...

I am following a tutorial that still uses the FirebaseListObservable. But I can't get it to work since it is depecrated. Using the AgularFireList, I cant't list the items.

Below is how I try to retrieve the items from firebase to Ionic app:

import { AngularFireDatabase, AngularFireList } from "angularfire2/database"; 


export class ShoppingListPage {
 shoppingListRef$: AngularFireList<any[]>

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

  navigateToAddShoppingPage() {
    // navigate the user to the Add SHopping Page
    this.navCtrl.push('AddShoppingPage');
  }
}

This is in the html:

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

Please help. Thank you.

ishivamjain · Accepted Answer · 2018-09-14 11:10:17Z

3

You can update your code

export class ShoppingListPage {
 shoppingList: any[];

  constructor(private navCtrl: NavController, 
              private navParams: NavParams,
              private database: AngularFireDatabase) {
              database.list('/shopping-list').valueChanges()   // returns observable
              .subscribe(list=> {
              this.shoppingList = list;
              console.log(this.shoppingList);
           });
  }

  navigateToAddShoppingPage() {
    // navigate the user to the Add SHopping Page
    this.navCtrl.push('AddShoppingPage');
  }
}

answered Sep 14, 2018 at 11:10

ishivamjain

1211 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wan de Gorie · Accepted Answer · 2018-04-01 16:43:27Z

0

Try update ur code.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList } from "angularfire2/database"; 

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

export class ShoppingListPage {

 shoppingListRef$: AngularFireList<any[]>

  constructor(private navCtrl: NavController, 
              private navParams: NavParams,
              private database: AngularFireDatabase) {

    this.shoppingListRef$ = database.list('/shopping-list');
  }

  navigateToAddShoppingPage() {
    // navigate the user to the Add SHopping Page
    this.navCtrl.push('AddShoppingPage');
  }
}

ANOTHER TIPS USING npm install firebase A. Create service.ts create constructor for detail data name from firebase. example: file service.ts in folder providers img file service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
import firebase from 'firebase';

@Injectable()
export class Service {

productList: any;

constructor(public http: HttpClient) {
   this.productList = firebase.database().ref('/shopping-list' );
}

getProductLists(): any{
    return this.productList;
}

B. GO to ur page.ts

import { Service } from '../../providers/service';
import { Component } from '@angular/core';
import { NavController, NavParams, IonicPage } from 'ionic-angular';
import firebase from 'firebase';

@ionicPage()
@Component({
  selector: 'page-products',
  templateUrl: 'products.html'
})

export class ShoppingListPage {
productsList: any;

constructor(
    public nav: NavController, 
    public params: NavParams, 
    public service: Service, ) {
    
    this.service.getProductLists().on('value', snapshot =>{
    this.productsList = [];
      snapshot.forEach( snap =>{
        this.productsList.push({          
          id: snap.key,
          itemName: snap.val().itemName,
          itemNumber: snap.val().itemNumber
        });
      });
    });
    
}

C. in html

<ion-content padding>
  <ion-list *ngIf="productsList.length">
    <ion-item *ngFor="let item of productsList">
      <h2>Item Name: {{item.itemName}}</h2>
      <h3>Amount: {{item.itemNumber}}</h3>
    </ion-item>
  </ion-list>
</ion-content>

edited Apr 1, 2018 at 16:43

answered Apr 1, 2018 at 16:06

Wan de Gorie

415 bronze badges

4 Comments

stack questions Over a year ago

Thank you for this solutiion. But if I use this, then I wouldn’t be able to follow along the tutorial anymore because it will be a very different approach already. I am very new to Ionic so I have to follow this tutorial. But I’m pretty sure this solution will work. If you can, can you please update my codes so it won’t change too much.

Wan de Gorie Over a year ago

Try change shoppingListRef$: AngularFireList<ShoppingItem> to shoppingListRef$: AngularFireList<any>

Wan de Gorie Over a year ago

and this.shoppingListRef$ = this.database.list('shopping-list'); to this.shoppingListRef$ = database.list('shopping-list').valueChanges() and u forget // import pipe. there a detect import pipe component try disable it at top

stack questions Over a year ago

I have done it as you suggested (please see edit in the question). I still get the same error (please see image). But if I use the 'import { AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database-deprecated'; and use the shoppingListRef$: FirebaseListObservable<ShoppingItem[]> I get the results I am looking for. This AngularFileList is new but I am having a hard time trying to implement it.

Collectives™ on Stack Overflow

How to use the AngularFireList to display list in html

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related