Angular2中的嵌套Observable使用AngularFire2不在视图中渲染 [英] Nested Observables in Angular2 using AngularFire2 not rendering in view
问题描述
我正在构建一个使用Firebase和AngularFire2(目前处于alpha版)的实验性(Ionic 2)应用。为此,我将以Aaron Saunders的教程为基础:
I'm building an experimental (Ionic 2) app that uses Firebase and AngularFire2 (currently in alpha). For this I'm following this tutorial from Aaron Saunders as a basis:
http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angular2-ionic2-part-2
https://github.com/aaronksaunders/ionic2-angularfire-sample
以下是我的home.ts和我的home.html。
Below are my home.ts and my home.html.
this.projects = af.list('/items').map( (items) => {
return items.map( item => {
item.meta = af.object(`/item_meta/${item.$key}`)
return item
})
})
以下演示文稿演示了AngularFire2嵌套Observables返回的方法:< a href =https://youtu.be/ngnSOTSS8Q8?t=1h6m37s\"rel =noreferrer> https://youtu.be/ngnSOTSS8Q8?t=1h6m37s
This way of nesting the Observables returns by AngularFire2 was demonstrated in the following presentation: https://youtu.be/ngnSOTSS8Q8?t=1h6m37s
以下是我的观点:
<ion-card *ngFor="#item of items | async">
<ion-card-header>
{{item.name}}
</ion-card-header>
<ion-card-content>
{{item.description}}
<br>
{{item.meta.stockPrice | async}}
</ion-card-content>
</ion-card>
我所遵循的演示中的示例的主要区别在于我正在筑巢'对象'可观察的'列表/数组'可观察。相反,他们在列表中添加一个列表。这样做的结果是我试图直接在我的视图中渲染{{item.meta.stockPrice}}而不是嵌套一个ngFor。
The main difference with the example in the presentation I followed is the fact that I'm nesting an 'object' Observable inside an 'list/array' Observable. Instead they add a list within a list. The consequence of this is that I'm trying to render {{ item.meta.stockPrice }} in my view directly instead of nesting an ngFor.
这就是我的意思数据如下:
This is what my data looks like:
{
"items":
{
"item1":{
"name": "Item 1",
"description": "1234"
},
"item2":{
"name": "Item 2",
"description": "abcd"
}
}
"items_meta"{
"item1":{
"stockPrice": 1234,
"moarData": "derp"
},
"item2":{
"stockPrice": 386,
"moarData": "lolz"
}
}
}
我似乎无法弄清楚为什么对象不想渲染。如果我将其输出到JSON,它会显示数据存在。请注意,我是Angular2的新手,仍然围绕着Angular1的变化。我做错了什么?
I can't seem to figure out why object doesn't want to render. If I output it to JSON it shows that the data is there. Please note that I am new to Angular2 and still wrapping my head around the changes from Angular1. What am I doing wrong?
编辑:我更新了上面的信息并添加了我的数据结构以使其更清晰
I've update the info above and added my data structure to make it more clear
推荐答案
针对您的具体问题......
For your specific issue...
{{(item.meta | async)?.stockPrice}}
使用elvis运算符( ?
)确保 async
操作完成,然后访问所需的值
use the elvis operator (?
) to make sure the async
operation is complete and then access the desired value
github中的源代码: https://github.com/aaronksaunders/afwithngcli
source code here in github: https://github.com/aaronksaunders/afwithngcli
-
你领先我......在新博客上发帖,但这里是代码
you got ahead of me... working on the new blog post, but here is the code
script.html
</ion-card>
<ion-card *ngFor="#user of usersWithMessages | async">
<ion-card-header>
{{user.displayName}}
</ion-card-header>
<ion-card-content>
{{ (user.messages | async) | json}}
</ion-card-content>
</ion-card>
script.ts
this.usersWithMessages = this.af.list('/users').map((_users) => {
return _users.map((_user) => {
_user.messages = this.af.object("/userObjects/public-messages/" +_user.$key)
return _user
})
})
数据
"userObjects" : {
"public-messages" : {
"8d75a63e-80cd-40cc-8f8b-87d3d33b0cd0" : {
"message-id-0" : {
"text" : "a public message"
}
},
"9c6ea912-ec24-4127-b123-6512ed135f06" : {
"-KFCGp5ojo7JSX2myOPE" : {
"date" : "1460511658442.75",
"text" : "this should be a. public message"
},
"-KFCJc4GtEo_PDWi7hru" : {
"date" : "1460512391529.69",
"text" : "this is a message that should be public"
},
"message-id-100" : {
"date" : "3243245411111",
"text" : "public for the other user"
}
}
}
},
"users" : {
"8d75a63e-80cd-40cc-8f8b-87d3d33b0cd0" : {
"displayName" : "c@mail.com",
"provider" : "password"
},
"9c6ea912-ec24-4127-b123-6512ed135f06" : {
"displayName" : "b@mail.com",
"provider" : "password"
},
"cdcf32af-a8cd-467d-a04f-dfc223e890d2" : {
"avatar" : "https://secure.gravatar.com/avatar/d23563ab3014ce965a90c37b22a34da8?d=retro",
"displayName" : "bryce@mail.com",
"provider" : 4
}
}
这篇关于Angular2中的嵌套Observable使用AngularFire2不在视图中渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!