I am able to retrieve JSON data from my server-side and view it on the console log, but I am encountering difficulties rendering it on the HTML page. Could this be due to incorrect syntax?
I am attempting to access data from my MongoDB and display it using Angular. I have tried incorporating various suggestions found online to present the data in a table with filtering, sorting, etc. It seems like there might be an issue with my *ngFor directive. I have experimented with ' let ticket of tickets.obj' among others, but no success.
This is my TypeScript file:
this.http.post(environment.apiBaseUrl + '/filter', JSON.stringify(filterOptions), httpOptions)
.subscribe( res => {
this.tickets = res;
this.tickets = Array.of(this.tickets);
this.totalPages = Math.ceil(this.totalRowCount / this.rowCount);
console.log('Fetched Tickets');
console.log(this.tickets);
},
err => {
console.log('Error fetching tickets');
}
);
HTML
<tbody>
<tr *ngIf="tickets.length == 0">
<td colspan="4" align="center" valign="middle">
No Records Found.
</td>
</tr>
<tr *ngFor="let ticket of tickets; let i = index;">
<td>{{i+1+offset}}</td>
<td>{{ticket.resolution}}</td>
<td>{{ticket.ticketId}}</td>
<td>{{ticket.status}}</td>
</tr>
</tbody>
The table remains empty despite the fact that data appears on the console log.