How to use the AngularFireList to display list in html

问题

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.

回答1:

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');
  }
}

回答2:

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>

来源：https://stackoverflow.com/questions/49598265/how-to-use-the-angularfirelist-to-display-list-in-html