ネストされた角度2 Firebaseリストのディレクティブ

Question

角度2のngForを使用してFirebaseクエリの結果をテンプレートにバインドしたいと思います。

コンポーネント：

export class FeaturedThreadsComponent { 
    threads: FirebaseListObservable<any[]>; 
    qualitySubject: Subject<any>; 

    constructor(af: AngularFire) { 
     this.qualitySubject = new Subject(); 
     this.threads = af.database.list('/threads', { 
      query: { 
       orderByChild: 'quality', 
       endAt: 5 
      } 
     }); 
    } 
} 

テンプレート：

<div *ngFor="let thread of threads | async"> 
    {{thread.title}} 
</div> 

しかし、私は子オブジェクトのキーを一覧表示するには、テンプレート内にネストされた別のngForディレクティブを使用したい場合は...

<div *ngFor="let thread of threads | async"> 
    {{thread.title}} 
    <div *ngFor="let participant of thread.participants"> 
     {{participant.$key}}} 
    </div> 
</div> 

コンソールエラーが発生しました。Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

私のデータベース構造でははthreadの子で、threadsの子であり、threadは動的キーです。だから私はparticipantsへのダイレクトパスを使用することはできません。

このパターンのネストのngForディレクティブは、ローカルファイルを単純に反復処理するサービスで正常に機能しました。なぜそれがここで働いていないのは、私には少しばかばかしいようです。

Answer 1

このスレッドに続くスレッドには、重複のフラグが付けられています。受け入れられた回答のようにパイプを作成することはできません。 The best answerは、受け入れられた回答のperformance issuesを回避し、はるかに簡単です。