显示来自 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

当然只有循环有效，因为 .list() returns 顾名思义是一个列表。

AF2也有.object()方法，你可以试试。

要在模板中输出 json，您可以使用 json 管道：

users | async | json

Answer 2

您可以使用：

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了解更多详情...

Answer 3

例如：

singleObject = this.db.object('/items/' + id).valueChanges();

然后在 html

{{singleObject | json}}
{{items.id-1}}

显示来自 angularfire2 查询的单个项目

Display single item from angularfire2 query

rxjs

angularfire2

angular