用于 Firebase 列表的嵌套 Angular2 ngFor 指令
Nested Angular2 ngFor Directives for Firebase Lists
我想在 Angular 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.
在我的数据库结构中,participants
是 thread
的子项,thread
是 threads
的子项,其中 thread
是动态键。所以我不能使用 participants
.
的直接路径
这种嵌套 ngFor
指令的模式在简单迭代本地文件的服务中运行良好。为什么它在这里不起作用对我来说有点模糊。
对于那些关注此线程的人来说,它被标记为重复的线程,请不要像接受的答案所建议的那样创建管道。 avoids the 已接受的答案,并且更简单。
我想在 Angular 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.
在我的数据库结构中,participants
是 thread
的子项,thread
是 threads
的子项,其中 thread
是动态键。所以我不能使用 participants
.
这种嵌套 ngFor
指令的模式在简单迭代本地文件的服务中运行良好。为什么它在这里不起作用对我来说有点模糊。
对于那些关注此线程的人来说,它被标记为重复的线程,请不要像接受的答案所建议的那样创建管道。