Angular2 中使用 AngularFire2 的嵌套 Observables 不在视图中呈现 [英] 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-2https://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>

与我遵循的演示文稿中的示例的主要区别在于，我将一个对象"Observable 嵌套在列表/数组"Observable 中.相反，他们在列表中添加了一个列表.这样做的结果是我试图直接在我的视图中呈现 {{ 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.

这是我的数据的样子:

{
    "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" : "[e-mail]",
      "provider" : "password"
    },
    "9c6ea912-ec24-4127-b123-6512ed135f06" : {
      "displayName" : "[e-mail]",
      "provider" : "password"
    },
    "cdcf32af-a8cd-467d-a04f-dfc223e890d2" : {
      "avatar" : "https://secure.gravatar.com/avatar/d23563ab3014ce965a90c37b22a34da8?d=retro",
      "displayName" : "[e-mail]",
      "provider" : 4
    }
  }

这篇关于Angular2 中使用 AngularFire2 的嵌套 Observables 不在视图中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！