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

发布时间：2020-12-17 08:52:37 所属栏目：安全来源：网络整理

导读：我正在构建一个使用Firebase和AngularFire2(目前处于alpha版)的实验性(Ionic 2)应用程序.为此,我将遵循Aaron Saunders的教程作为基础： http://www.clearlyinnovative.com/integrating-firebase-with-angularfire2-into-angular2-ionic2-part-2 https://gith

我正在构建一个使用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>

与我所遵循的演示中的示例的主要区别在于,我在’list / array’Observable中嵌套了一个’对象’Observable.相反,他们在列表中添加一个列表.这样做的结果是我试图直接在我的视图中渲染{{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的变化.我究竟做错了什么？

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

针对您的具体问题……

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

使用elvis运算符(？)确保异步操作完成,然后访问所需的值

这里的源代码是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" : "3243245422222","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","cdcf32af-a8cd-467d-a04f-dfc223e890d2" : {
      "avatar" : "https://secure.gravatar.com/avatar/d23563ab3014ce965a90c37b22a34da8?d=retro","displayName" : "bryce@mail.com","provider" : 4
    }
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!