Angular2中的嵌套Observable使用AngularFire2不在视图中渲染

本文介绍了Angular2中的嵌套Observable使用AngularFire2不在视图中渲染的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我正在构建一个使用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返回的方法： 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" : "[email protected]", "provider" : "password" }, "9c6ea912-ec24-4127-b123-6512ed135f06" : { "displayName" : "[email protected]", "provider" : "password" }, "cdcf32af-a8cd-467d-a04f-dfc223e890d2" : { "avatar" : "https://secure.gravatar.com/avatar/d23563ab3014ce965a90c37b22a34da8?d=retro", "displayName" : "[email protected]", "provider" : 4 } } 这篇关于Angular2中的嵌套Observable使用AngularFire2不在视图中渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！