显示angularfire2查询中的单个项目

Question

有没有办法在不使用ngFor循环的情况下显示angularfire2的查询？

this.user = this.af.database.list('items',{
  query: {
    orderByChild: 'id',
    equalTo: id
  }
})

我尝试用所有这些输出HTML,但只有循环工作

{{user}}
{{user | async }}

{{user.name}}
{{user.name | async }}

<h1>{{ (user | async)?.name }}</h1>

<ul>
   <li *ngFor="let u of user  | async" >{{u.name}}</li>
</ul>

数据集是

{
  "items" : {
    "id-1" : {
      "id" : 1,
      "name" : "Gambit"
    },
    "id-2" : {
      "id" : 2,
      "name" : "Wolverine"
    }
  },
  "list" : "bob"
}

通过输出json到html来调试angularfire使用很简单,这似乎在angularfire2中不起作用,是否还有另外这样做？

Answer 1

你可以这样做:

this.user = this.af.database.list('items',{
  query: {
    orderByChild: 'id',
    equalTo: id
  }
}).map((items: Array<any>) => items.find(item => item.id === id))

但我建议重新构建您的数据,如果您有,id您应该能够直接获取项目:

this.user = this.af.database.object(`items/${id}`)

查看官方文档:构建您的数据库以获取更多详细信息......