Im currently working on an Angular App and have gotten to a problem i can't find any solution for.
I have this Schema:
const ContentSchema = new mongoose.Schema({
subject: String,
customer: String,
task: String,
date: Date,
inCharge: String,
comment: [String] })
This method in my Angular-App retrieves the Content on init of the Component.
this.contentServ.getContent()
.subscribe(data => this.contents = data as mycontent[])
This is how my service is accessing the api
getContent(): Observable<mycontent[]> {
return this.http.get<mycontent[]>('/api/retrieveContent')
}
And this is how im displaying it
<tr *ngFor="let content of contents">
<th><input type="checkbox" name="contentAction" id="{{content._id}}"></th>
<th>{{content.subject}}</th>
<th>{{content.customer}}</th>
<th>{{content.task}}</th>
<th>{{content.date | date : "dd.MM.yyyy" }}</th>
<th>{{content.inCharge}}</th>
<th>{{content.comment}}</th>
</tr>
When i do this, my comments get displayed but they are displayed as they get passed by the JS from the DB:
{ comment: [ 'This is my first comment', 'i can now add another one' ],
_id: 5bd0221100acd00f5bf8800d,
subject: 'Application Development',
customer: 'myCustomer',
task: 'myTask',
date: 2018-10-15T00:00:00.000Z,
inCharge: 'myOfficial',
__v: 0 }
Now the problem is, that {{content.comment}} is an array i cant access by doing this:
<tr *ngFor="let content of contents, let i = index">
<th><input type="checkbox" name="contentAction" id="{{content._id}}"></th>
<th>{{content.subject}}</th>
<th>{{content.customer}}</th>
<th>{{content.task}}</th>
<th>{{content.date | date : "dd.MM.yyyy" }}</th>
<th>{{content.inCharge}}</th>
<th>{{content.comment[i]}}</th>
</tr>
also tried this:
<tr *ngFor="let content of contents">
<th><input type="checkbox" name="contentAction" id="{{content._id}}"></th>
<th>{{content.subject}}</th>
<th>{{content.customer}}</th>
<th>{{content.task}}</th>
<th>{{content.date | date : "dd.MM.yyyy" }}</th>
<th>{{content.inCharge}}</th>
<th><ul *ngFor="let content.comment of content.comments, let i = index><li>{{content.comment[i]}}</li></th>
</tr>
I even tried doing this:
<th id="displayComments"></th>
and doing
document.getElementById("displayComments").innerHTML = {{this.contents.comment}}.join(" <br> ");
But nothing of this seems to work as inteded.
My goal is to get an output in my table where i have something like
<tr *ngFor="let content of contents">
<th><input type="checkbox" name="contentAction" id="{{content._id}}"></th>
<th>{{content.subject}}</th>
<th>{{content.customer}}</th>
<th>{{content.task}}</th>
<th>{{content.date | date : "dd.MM.yyyy" }}</th>
<th>{{content.inCharge}}</th>
<th><ul>
<li>My Comment nr. 1</li>
<li>My Comment nr. 2</li>
</ul></th>
</tr>
I hope some of you guys may be able to help me with my problem.
If you need further information of my code, I'll give it to you as fast as I can.
let content.comment of content.commentsyou cannotletsomething like that, let is used to create or ask angular to create a local variable for each iteration. It can be something likelet mycomment of content.comments