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>
- 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.
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.