Question

我正在构建一个使用Firebase和AngularFire2（目前处于alpha版）的实验性（Ionic 2）应用。为此，我将以Aaron Saunders的教程为基础：

http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angular2-ionic2-part-2 https://github.com/aaronksaunders/ionic2-angularfire-sample

以下是我的home.ts和我的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

以下是我的观点：

<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>

与我所遵循的演示中的示例的主要区别在于，我正在嵌套一个＆＃39;对象＆＃39;在＆＃39;列表/数组中可观察到＆＃39;观察到。相反，他们在列表中添加一个列表。这样做的结果是我试图直接在我的视图中渲染{{item.meta.stockPrice}}而不是嵌套ngFor。

这就是我的数据：

{
    "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的变化。我做错了什么？

编辑：我已更新上述信息并添加了我的数据结构，以使其更加清晰

Answer 1

针对您的具体问题......

{{(item.meta | async)?.stockPrice}}

使用elvis运算符（?）确保async操作完成，然后访问所需的值

github中的源代码：https://github.com/aaronksaunders/afwithngcli

-

你领先于我......在新的博客文章上工作，但这里是代码

<强> 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 } }

使用AngularFire2的Angular2中的嵌套Observable不在视图中呈现

1 个答案: