Hey there! I'm facing a little issue that I need help solving. I asked a question before when things weren't clear, but now they are (you can find the previous question here). I'll share my code and explain what I want to achieve shortly.
Here's the data in my database:
posts
--- 1
--- publisher: "Erick"
--- content: "Something is written here"
--- comments
--- 1
--- comment: "Yes"
--- commentator: "Patrick"
--- 2
--- comment: "I don't think so"
--- commentator: "Sarah"
--- 2
--- publisher: "Patrick"
--- content: "News here.."
--- comments
--- 1
--- comment: "Yes"
--- commentator: "Ines"
I retrieve the data in my app.component.ts:
export class AppComponent implements OnInit {
pubs: Observable<any[]>;
constructor(private db: AngularFireDatabase){
}
ngOnInit(){
this.pubs = this.getData('/posts');
}
getData(path): Observable<any[]>{
return this.db.list(path).valueChanges()
}
}
Below is my HTML code:
<div *nfFor="let post of pubs | async ">
<p>Publisher: {{post.publisher}}</p>
<p>Content: {{post.content}}</p>
<div>{{post.comments}}</div>
<ul>
<li *ngFor="let cmt of post.comments" >{{cmt?.comment}}</li>
</ul>
</div>
However, you can see that my first object is empty, causing issues as shown below:
Publisher: Erick
Content: Something is written here
,[object Object],[object Object]
-
- Yes
- I don't think so
Publisher: Patrick
Content: News here
,[object Object]
-
- Yes
This problem is reflected in the image linked https://i.sstatic.net/RvigT.png.
I would greatly appreciate any assistance with this. Thank you!