Ionic framework FirebaseList-无法访问从firebase获取的分析数据

运行以下代码时，我得到管道“AsyncPipe”的“Error:InvalidPipeArgument:”[object]”

html模板：

 <ion-list>
    <ion-item-sliding *ngFor="let item of shoppingItems | async">
      <ion-item>
        {{ item.$value }}
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="danger" icon-only (click)="removeItem(item.$key)"><ion-icon name="trash"></ion-icon></button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

火基数据库

shoppingItems
 -KxmiUt64GJsPT84LQsI: "qwerty"
 -KxmifqyfD41tRPwFh07: "key"

从web应用程序中，我可以向firebase db添加项目。但我无法从firebase渲染数据。我得到了上面提到的错误

提前感谢您的帮助。

AngularFire2 V5

this.afd.list（'/shoppingItems/'）

不返回一个异步可观察对象，该对象应该与

async

管道一起工作。它返回对实时数据库中列表的引用。 您需要使用

valueChanges（）

返回该值

在提供程序中，返回可观察的

 getShoppingItems() {

    console.log("Shopping items"+this.afd.list('/shoppingItems/'))
    return this.afd.list('/shoppingItems/').valueChanges();//here
  }

如果您通过

$key/$value

访问， 检查一下。这是因为

FirebaseList

已弃用，并且

AngularFireList

现在从版本5返回

调用.valueChanges（）返回一个不带任何元数据的可观察对象。如果您已经将密钥持久化为属性，那么就可以了。但是，如果您依赖$key，则需要使用.snapshotChanges（）

您需要使用

snapshotChanges（）

访问html中的

$key

或

$value

，

---

使用

item.payload.key

和

item.payload.val（）

在

home.ts

文件中添加

ionViewDidLoad

生命周期，并用以下代码代替构造函数在

ionViewDidLoad

中加载项目

    constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider) {

  }

  ionViewDidLoad() {
    this.shoppingItems = this.firebaseProvider.getShoppingItems();
    console.log(this.shoppingItems);
  }

在page.ts导入

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { AngularFireDatabase} from 'angularfire2/database';
 import { Observable } from "rxjs/Observable";
 import { ShoppingItem } from '../../model/shoppingitem';

从提供商处以正确的方式导入提供商

 import { FirebaseProvider } from '../../providers/firebase/firebase';

 export class Page {

  shoppingItems:Observable<ShoppingItem[]>;

 constructor(public navCtrl: NavController, 
             public firebaseProvider: FirebaseProvider) {

                this.shoppingItems=this.firebaseProvider
                .getShoppingItem()
                .snapshotChanges()
                .map(
                  changes=>{
                    return changes.map(c=>({
                      key:c.payload.key, ...c.payload.val(),
                    }));
                  }
                );
          }
        }

     }

您的购物商品模型

 export interface ShoppingItem{
  key?:string;
  }

---

这看起来很像..@SurajRao是的，我也在学习相同的教程。这个返回值应该分配给Angularfirelist[]类型的变量，对吗？在ts页中如何做？从您的示例中，您已经在使用

async

，所以您想要分配列表的可观察性（您已经在这样做了）。如果您需要数据，您必须在Component中订阅感谢您的帮助！我仍然无法在模板中获取值的using item.$value。你知道如何调试/解决它吗？这是angularfire2@ImdadAli的第5版，你必须使用4.x

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { AngularFireDatabase} from 'angularfire2/database';
 import { Observable } from "rxjs/Observable";
 import { ShoppingItem } from '../../model/shoppingitem';

 import { FirebaseProvider } from '../../providers/firebase/firebase';

 export class Page {

  shoppingItems:Observable<ShoppingItem[]>;

 constructor(public navCtrl: NavController, 
             public firebaseProvider: FirebaseProvider) {

                this.shoppingItems=this.firebaseProvider
                .getShoppingItem()
                .snapshotChanges()
                .map(
                  changes=>{
                    return changes.map(c=>({
                      key:c.payload.key, ...c.payload.val(),
                    }));
                  }
                );
          }
        }

     }

  private itemListRef = this.afDatabase.list<ShoppingItem>('shopping-list');

  constructor(private afDatabase: AngularFireDatabase) {}

 .getShoppingItem(){

   return this.itemListRef;

  }
 }

 export interface ShoppingItem{
  key?:string;
  }