如何迭代 Firebase 对象 Observable 属性作为 Angular 中的数组？

Question

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

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

<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.

我收到该错误的原因对我来说很有意义，因为 group 对象上的属性 users 不是数组，而是对象。我的问题是如何得到它，以便 users 属性可以被视为一个数组。

Answer 1

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

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted

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

*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

约书亚的回复：

所以，我最终做的是订阅 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>

不确定这是否是最好的方法，但这似乎是最简单的方法。另外，根据我对订阅和 "snapshots" 的理解，这应该没问题。

如何迭代 Firebase 对象 Observable 属性作为 Angular 中的数组？

How to iterate though a FirebaseObjectObservable property as an array in Angular?

firebase

angularfire2

angular

如何迭代 Firebase 对象 Observable 属性 作为 Angular 中的数组？

How to iterate though a FirebaseObjectObservable property as an array in Angular?

firebase

angularfire2

angular

如何迭代 Firebase 对象 Observable 属性作为 Angular 中的数组？