I am currently working on developing the front end for an API request. The structure of the response model is as follows:
export class User {
ID: number;
first_name: string;
last_name: string;
isAdmin: boolean;
}
Within the user.components file, I have implemented the following code snippet:
users: User[];
ngOnInit(){
this.userService.getUsers().subscribe(data => {
console.log(data);
this.users = data;
});
}
As for the service:
getUsers(): Observable<User[]>{
return this.http.get<User[]>(this.apiUrl+"/users");
In the HTML template:
<table>
<tr *ngFor="let user of users">
<td>{{user.ID}}</td>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.isAdmin}}</td>
</tr>
</table>
When checking the console output, I received a Console log.
Although no errors are being displayed and the results are visible in the console, they are not appearing on the actual web page. After some experimentation, it seems that using the same variable names in the "User" class as in the backend resolves this issue. Is this expected behavior or am I overlooking something?