从 Angular2 中的 observable 访问对象的字段答案

【问题标题】：access field of an object from observable in Angular2从 Angular2 中的 observable 访问对象的字段
【发布时间】：2017-02-01 22:48:08
【问题描述】：

我正在尝试使用 observable 从数据库中提取对象。在我检索对象并将其放入变量后，我只能将整个对象放入我的模板中，并且一旦我尝试访问对象的任何特定字段，我就会收到错误。

这是我的服务，它有一个函数可以返回我想要的类型的 observable。它基本上在数据库中查找并返回其 URL 等于我的 URL 变量的 Item 对象列表：

  getItemByUrl(url : string):Observable<Item[]>{
    return this.angularFire.database.list('items',{query:{
        orderByChild: 'url',
        equalTo: url}
    })

现在，在我的主组件中，我使用此函数获取列表，然后将列表的第一项放入我自己的项目对象中，这样我就可以在我自己的程序中使用它：

ngOnInit(){


   this.itemService.getItemsByUrl(this.url)
    .subscribe(res => this.item = res[0])
}

现在我将我的项目传递给模板：

{{item | json}}

一切都很好，我看到了整个对象。但是，一旦我尝试访问项目中的字段，例如 {{item.name}}，我就会收到错误消息：

Cannot read property 'name' of undefined

任何想法为什么？

【问题讨论】：

因为item.name 只能使用一次item； JSON 管道旨在容忍这种情况。
Observable type error: cannot read property of undefined的可能重复

标签： angular firebase observable

【解决方案1】：

我终于能够找到问题所在。正如 jonrsharpe 提到的，显然你从 observable 获得的价值只是一个 Json。所以我必须创建一个函数来获取 json 并从中创建新项目。然后我可以使用 Item 对象并引用它的属性。这是我使用的功能：

 static fromJson({$key, name,number}){

    return new Item($key, name,number)}

【讨论】：