如何使用AngularFireList在html中显示列表

Question

我可以保存到firebase但无法将项目作为列表检索。它给了我这样的错误：Uncaught(in promise): Error: InvalidPipeArgument'[Object.Object]' for pipe 'AsyncPipe' ...

我正在关注仍使用FirebaseListObservable的教程。但是，由于它被取消，我无法让它发挥作用。使用AgularFireList，我无法列出项目。

以下是我尝试从firebase检索项目到Ionic应用程序的方法：

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

这是在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>

请帮忙。谢谢。

Answer 1

尝试更新你的代码。

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

使用npm安装firebase的另一个提示 A.创建service.ts 从firebase创建详细数据名称的构造函数。 示例：文件夹提供程序img file service.ts

中的文件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中。转到你的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
        });
      });
    });
    
}

℃。在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>