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

Answer 2

当然只有循环才有效，因为.list()会返回一个名称所暗示的列表。

AF2上还有一个.object()方法，你可以试试。

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

users | async | json

Answer 3

例如：

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

然后是html

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

显示angularfire2查询中的单个项目

3 个答案: