适用于Firebase列表的嵌套Angular2 ngFor指令

我想在Angular 2中使用ngFor将Firebase查询的结果绑定到我的模板。这很容易在下面实现。适用于Firebase列表的嵌套Angular2 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的直接路径。

嵌套ngFor指令的这种模式在仅通过本地文件迭代的服务中正常工作。为什么它不在这里工作似乎对我有点模糊。

来源

2017-01-18 J. Adam Connor

我不这么认为。如果我使用实际的键'{{participant.adam}}'，我会得到相同的控制台错误。我怀疑这与试图迭代Angular 2不能识别为数组的对象'参与者'有关。 –

'thread.participants'将是一个对象，并且将不可用'ngFor'进行迭代。这是核心问题，被引用问题的答案应该可以帮助你。 – cartant

它是'threads：FirebaseListObservable ;'将线程'存储为一个可迭代的数组？这似乎是有道理的。这意味着这个问题更像是一个特定于Firebase/Angularfire2的使用问题。因为我需要一种方法，当''参与者'是一个动态密钥的子节点，它不能以直接路径暴露时，它就成为一个可观察数组。 –

对于那些追随此线程的人被标记为重复的人，请不要像接受的答案建议那样创建管道。 The best answer避免了被接受的答案的performance issues，并且简单得多。

来源

2017-01-18 03:47:05

适用于Firebase列表的嵌套Angular2 ngFor指令

回答

相关问题