3
角度2のngForを使用してFirebaseクエリの結果をテンプレートにバインドしたいと思います。ネストされた角度2 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ディレクティブは、ローカルファイルを単純に反復処理するサービスで正常に機能しました。なぜそれがここで働いていないのは、私には少しばかばかしいようです。
私はそうは思わない。私が実際のキー '{{participant.adam}}'を使用すると、私は同じコンソールエラーを受け取ります。これは、Angular 2が配列として認識しないオブジェクト '参加者 'を反復しようとすることに関連していると思われます。 –
'thread.participants'はオブジェクトになり、' ngFor'では反復不可能になります。それが中核的な問題であり、参照された質問の受け入れられた答えがあなたに役立つはずです。 – cartant
'threads：FirebaseListObservable;' 'threads'を反復可能な配列として保存していますか？それは理にかなっているようです。これはFirebase/Angularfire2に固有の使用上の疑問であることを意味します。なぜなら、直接の経路では公開できない動的キーの子である場合、観測者の配列に '参加者 'を入れる方法が必要だからです。 –