FirebaseObjectObservableプロパティを角度で配列として反復処理する方法は？

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ことができます。

非同期パイプが加入観察可能または約束とにすることは、あなたがそう

を放射された最新の値を返します。 iterableを取得しないでください。代わりに、次のコードを使用します。

*ngFor="let email of emails" 

EDIT：いいえ、それは配列に変換されません。あなた自身、とのことを行う必要がありますので、上記のように、それは、反復可能になります、と言う：あなたが望むよう

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

は、配列に、追加のプロパティ、または全体のユーザーオブジェクトを追加します。 exaxmpleについて、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> 

これはそれを行うための最善の方法があるかどうかわからないが、それは最も簡単なようです。また、私はサブスクリプションと "スナップショット"について理解しているので、これはうまくいくはずです。