Question

我想在Angular 2中使用(https:\/\/www\.whoscored\.com\/Regions\/252\/Tournaments\/2\/Seasons\/5826\/Stages\/12496\/TeamStatistics\/England-Premier-League-2015-2016)+将Firebase查询的结果绑定到我的模板。这在下面很容易实现。

成分：

ngFor

模板：

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的孩子，其中threads是动态键。所以我不能使用thread的直接路径。

这种嵌套participants指令模式在一个简单地遍历本地文件的服务中运行良好。为什么它不起作用对我来说似乎有点模糊。

Answer 1

对于那些遵循这个主题的人来说，它被标记为副本，抵制创建一个像接受的答案建议的管道。 The best answer避免接受答案的performance issues，并且更加简单。

嵌套Angular2 ng For Firebase列表的指令

1 个答案: