Angular2和Angularfire嵌套* ngfor问题

时间:2017-01-02 21:14:51

标签: angular firebase-realtime-database nested-loops angularfire2 ngfor

组件

export class Component{
  people: Observable<any[]>;

  constructor(public af:AngularFire) {
    this.people = af.database.list('/people')
    .map((people) => {  
      return people.map((person) => {    
        person.post = af.database.list(`/post/${person.$key}`)
        .map((comments) => {
          return comments.map ((comment) => {
            person.post.comment = af.database.list(`/comments/${comment.$key}`)
            return person.post
          })
        })
        return person
      })    
    });
  }
}

HTML

<ul>
<li *ngFor="let person of people | async">
    {{ person.name }}
    <ul>
        <li *ngFor="let todo of person.post | async">
        {{todo.name}}        
            <ul>
                <li *ngFor="let comment of person.post.comment | async">
                    {{comment.name}} 

                </li>
                <li>
                    <form (submit)="person.post.comment.push({ name:form3.value})">
                        <input #form3><label for="form3">Add Person.post.Comment</label> 
                    </form> 
                </li>
            </ul> 
        </li>
        <li>             
        <form (submit)="person.post.push({ name:form2.value})">
            <input #form2><label for="form2">Add Person.post</label>
        </form>
        </li> 
    </ul>
</li>
<li>
    <form (submit)="people.push({ name:form1.value})">
        <input #form1><label for="form1">Add Person</label> 
    </form> 
</li> 

    我正在尝试以下内容:

    创造人才。 每个人都可以创建一个帖子 对于每个帖子,可以创建评论。

    我可以让它与人们一起工作并发布。但是在评论层上添加不是。

    它正在我想要的方式在firebase数据库中创建它们。但是从firebase的阅读中我得到了以下问题。

  • 无法读取帖子图层(获取项目符号但不是对象)
  • 可以阅读评论图层,但会将评论放在人员标题下的所有帖子中。

0 个答案:

没有答案