Firebase 列表的嵌套 Angular2 ngFor 指令 [英] Nested Angular2 ngFor Directives for Firebase Lists
问题描述
我想在 Angular 2 中使用 ngFor
将 Firebase 查询的结果绑定到我的模板.这很容易在下面实现.
组件:
导出类FeaturedThreadsComponent {线程:FirebaseListObservable;质量主题:主题<任何>;构造函数(AF:AngularFire){this.qualitySubject = new Subject();this.threads = af.database.list('/threads', {询问: {orderByChild: '质量',结束时间:5}});}}
模板:
{{thread.title}}
但是如果我想使用另一个嵌套在模板中的 ngFor
指令来列出子对象的键...
{{thread.title}}<div *ngFor="让 thread.participants 的参与者">{{参与者.$key}}}
我收到控制台错误,找不到类型为object"的不同支持对象[object Object]".NgFor 只支持绑定到 Iterables,比如 Arrays.
在我的数据库结构中,participants
是thread
的一个孩子,它是threads
的一个孩子,其中thread
是一个动态键.所以我不能使用 participants
的直接路径.
这种嵌套 ngFor
指令的模式在一个简单地迭代本地文件的服务中工作得很好.为什么它在这里不起作用对我来说似乎有点模糊.
对于那些关注此线程到它被标记为重复的线程的人,请不要像接受的答案所建议的那样创建管道.最佳答案避免了已接受答案的性能问题,而且要简单得多.
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.
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.
这篇关于Firebase 列表的嵌套 Angular2 ngFor 指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!