Angular2 and Angularfire nested *ngfor issues

278 Views Asked by At

Component

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> 

    I'm trying to have the following:

    Create people. for each person a post can be created for each post a comment can be created.


    I can get it working with just going people and post. But adding on the comment layer isn't.

    It is creating them the way I want correctly in the firebase database. But on the read from firebase I am getting the follow problems.


  • Can't read the post layer (get the bullet point but not the object)
  • Can read the comment layer but it puts the comments across all the posts under the person heading.
0

There are 0 best solutions below