angular - 显示来自 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}`)

查看官方文档:Structure Your Database更多详情...