Question

我希望能够在我的Firebase数据库中*ngFor对象的users属性上运行groups。

到目前为止，我正在尝试这个：

<h5>{{ (group$ | async)?.name }}</h5>
<div class="gd-users-container">
  <span *ngFor="let user of (group$ | async)?.users">{{ user.email }}</span>
</div>

group$ = getGroup(): FirebaseObjectObservable<any>;

数据的结构如下所示：

"groups": {
  "marketing": {
    "apps": {
      "someid": {
        "id": "someid",
        "name": "Payroll"
      }
    },
   "id": "marketing",
   "name": "Marketing",
   "users": {
     "23948n": {
       "id": "23948n",
       "email": "someemail@domain.com"
      },
     "asdfasdfasdf": {
       "id": "asdfasdfasdf",
       "email": "someemail@domain.com"
      }
    }
  }
}

当我尝试上面的标记时，我得到了该组的名称，但是当涉及到*ngFor时出现错误：

ERROR Error: Cannot find a differ supporting object '[object Object]'
of type 'object'. NgFor only supports binding to Iterables such as Arrays.

为什么我收到该错误是有道理的，因为users对象上的属性group不是数组，而是一个对象。我的问题是如何获取它以便users属性可以被视为数组。

Answer 1

在此上下文中不需要异步管道。正如错误所述，*ngFor只能绑定到迭代，但是async pipe does is：

异步管道订阅Observable或Promise，返回它发出的最新值

所以你没有得到一个可迭代的。相反，使用：

*ngFor="let email of emails"

编辑：不，它不会将其转换为数组。如上所述，它需要一个可迭代的，所以你需要自己做，比如说：

let emails: [];
Object.keys(group$?.users).map(key => emails.push(group$?.users[key].email)))

根据需要将其他属性或整个用户对象添加到数组中。例如，在ES7的Object.values()：

中

let users = Object.values(group$.users)

原始<div *ngFor = "let user of users">{{user?.email}}</div>

Answer 2

Joshua回复：

所以，我最终做的是订阅group对象，并创建了一个分配给users$的单独group.users模型：

this.group$ = this.route.paramMap
  .switchMap((params: ParamMap) =>
    this.gs.getObjectObservable(params.get('id')));

this.group$.subscribe(snapshot => {
  this.users$ = Object.values(snapshot.users);
});

然后我只是将数据显示为：

<div *ngFor="let user of users$">
  {{ user.email }}
</div>

不确定这是否是最佳方式，但似乎最简单。此外，根据我对订阅和“快照”的理解，这应该没问题。

如何在Angular中将FirebaseObjectObservable属性作为数组进行迭代？

2 个答案: