Project Summary
I am currently engaged in a project that involves:
1- Angular 6
2- Aspnet Core 2.1
Situation
In my Angular code, I am making a GET request using the following snippet:
let reqHeader = new HttpHeaders({ 'Content-Type': 'application/json' });
this.http.get(this._URL).subscribe(
(data => {
this._engineersList = data[0];
this._shiftList = data[1];
console.log(data[0])
}), error => this.error
);
class Engineers {
public ID: number;
public Name: string;
}
class Shifts {
public ID: number;
public EmployeeID: number;
public EmployeeName: string;
public ShiftName: string;
public ShiftTime: string;
}
Since my properties are in Camel case, I bind them the same way in my HTML like so:
<tbody>
<tr *ngFor="let engineer of _engineersList">
<td>
{{engineer.Id}}
</td>
<td>
{{engineer.Name}}
</td>
</tr>
</tbody>
I see no data binding as expected:
https://i.sstatic.net/KLMbJ.png
However, upon converting my Camel case properties to lowercase:
<tbody>
<tr *ngFor="let engineer of _engineersList">
<td>
{{engineer.id}}
</td>
<td>
{{engineer.name}}
</td>
</tr>
</tbody>
https://i.sstatic.net/7DPlU.png
Discoveries
Upon examining the results of my GET request in the browser console, I noticed that the observable is returning properties in lowercase.
https://i.sstatic.net/4NANV.png
I also confirmed on the server side that there were no issues with the data being returned. The server provided the correct data with properties properly in Camel case.
https://i.sstatic.net/dggWg.png
My question is why the JSON result is displaying and binding properties in lowercase even though my model class has properties in Camel case? I have detailed my issue here and would appreciate any assistance or insights on what could be wrong in my code. Thank you for your help.