FirebaseList - 无法访问从 Firebase 获取的解析数据 [英] FirebaseList - Unable to access parse data fetched from firebase
问题描述
我在运行以下代码时收到错误:InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'".
I'm getting " Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe' " when running the following code.
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>
页面 ts:
shoppingItems: AngularFireList<any>;
constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider) {
this.shoppingItems = this.firebaseProvider.getShoppingItems();
}
firebase 提供程序
firebase provider
constructor(public afd: AngularFireDatabase) {
console.log('Hello FirebaseProvider Provider');
console.log("Shopping items"+afd.list('/shoppingItems/'))
}
getShoppingItems() {
console.log("Shopping items"+this.afd.list('/shoppingItems/'))
return this.afd.list('/shoppingItems/');
}
addItem(name) {
this.afd.list('/shoppingItems/').push(name);
}
firebase 数据库
firebase db
shoppingItems
-KxmiUt64GJsPT84LQsI: "qwerty"
-KxmifqyfD41tRPwFh07: "key"
从网络应用程序中,我能够将项目添加到 firebase db.但我无法从 firebase 渲染数据.我收到上述错误.
From the web app I was able to add items to firebase db. But I wasn't able to render the data from firebase. I am getting the above mentioned error.
预先感谢您的帮助.
推荐答案
AngularFire2 V5
this.afd.list('/shoppingItems/')
不返回应该与 async
管道一起使用的异步 observable.它返回对实时数据库中 List 的引用.您需要使用 valueChanges()
来返回那个.
AngularFire2 V5
this.afd.list('/shoppingItems/')
does not return an asynchronous observable which is supposed to work with async
pipe. It returns a reference to the List in the real-time database.
You need to use valueChanges()
to return that.
在您的提供者中返回可观察的,
In your provider return the observable,
getShoppingItems() {
console.log("Shopping items"+this.afd.list('/shoppingItems/'))
return this.afd.list('/shoppingItems/').valueChanges();//here
}
如果您通过 $key/$value
访问,检查 angularfire2 v4 到 5 的升级细节.这是因为 FirebaseList
已被弃用,AngularFireList
现在从版本 5 返回.
If you are accessing through $key/$value
,
Check the upgrade details for angularfire2 v4 to 5. This is because FirebaseList
is deprecated and AngularFireList
is now returned from version 5.
调用 .valueChanges() 返回一个没有任何元数据的 Observable.如果您已经将密钥作为属性持久化,那么您就可以了.但是,如果您依赖于 $key,则需要使用 .snapshotChanges()
Calling .valueChanges() returns an Observable without any metadata. If you are already persisting the key as a property then you are fine. However, if you are relying on $key, then you need to use .snapshotChanges()
你需要使用snapshotChanges()
getShoppingItems() {
console.log("Shopping items"+this.afd.list('/shoppingItems/'))
return this.afd.list('/shoppingItems/').snapshotChanges();//here
}
要在 html 中访问 $key
或 $value
,使用 item.payload.key
和 item.payload.val()
To access $key
or $value
in html,
use item.payload.key
and item.payload.val()
这篇关于FirebaseList - 无法访问从 Firebase 获取的解析数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!