问题
I want to bind the results of a Firebase query to my template using ngFor in Angular 2. This is easily achieved below.
component:
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
}
});
}
}
template:
<div *ngFor="let thread of threads | async">
{{thread.title}}
</div>
But if I want to use another ngFor directive nested within the template to list a child object's keys...
<div *ngFor="let thread of threads | async">
{{thread.title}}
<div *ngFor="let participant of thread.participants">
{{participant.$key}}}
</div>
</div>
I get the console error, Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
In my database structure, participants is a child of thread, which is a child of threads where thread is a dynamic key. So I can't use a direct path to participants.
This pattern of nesting ngFor directives worked fine in a service that simply iterated over a local file. Why it isn't working here seems a bit fuzzy to me.
回答1:
For those of you who follow this thread to the one it is flagged as a duplicate of, resist creating a pipe like the accepted answer suggests. The best answer avoids the performance issues of the accepted answer and is much simpler.
来源：https://stackoverflow.com/questions/41710022/nested-angular2-ngfor-directives-for-firebase-lists