Angular table is not showing any content-CodePudding

So i've been fiddling around Angular for the first time, and what I want to do is render a table from API. I have working API with .NET, and I think I managed to parse all the information to the web-interface, although the table is not showing any content.

Service

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpResponseBase } from '@angular/common/http';
import { Observable } from 'rxjs/';
import { Employee } from './models/employee.model';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
readonly APIUrl="https://localhost:7137/api/Employee";

  constructor(private http:HttpClient) { }

  getEmployeeList(): Observable<Employee[]>{
    return this.http.get<Employee[]>(this.APIUrl);
  }
}

Component

import { Component, OnInit } from '@angular/core';
import { Employee } from 'src/app/models/employee.model';
import { SharedService } from 'src/app/shared.service';
@Component({
  selector: 'app-show-employee',
  templateUrl: './show-employee.component.html',
  styleUrls: ['./show-employee.component.css']
})
export class ShowEmployeeComponent implements OnInit {
  employees: Employee[] = [];
  
  constructor(private service : SharedService) { }

  ngOnInit(): void {
    this.getEmployees();
  }

  getEmployees() {
    this.service.getEmployeeList()
    .subscribe(
      response => {
        this.employees = response;
        console.log(this.employees);
      }
    );
  }
}

HTML

<table >
    <thead>
        <tr>
            <th>Department</th>
            <th>Name</th>
            <th>Birthday</th>
            <th>Date of joining</th>
            <th>Salary</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let employee of employees">
            <td>{{employee.employeeDepartment}}</td>
            <td>{{employee.employeeName}}</td>
            <td>{{employee.dateOfBirth}}</td>
            <td>{{employee.dateOfJoining}}</td>
            <td>{{employee.employeeSalary}}</td>
            <td>
                <button type="button" >
                    Edit
                </button>
                <button type="button" >
                    Delete
                </button>
            </td>
        </tr>
    </tbody>
</table>

It renders the table itself, but insides are empty

console.log in component.ts returns the following:

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {EmployeeID: 1, EmployeeDepartment: 'IT', EmployeeName: John Doe', DateOfBirth: '14.08.1995 0:00:00', DateOfJoining: '01.01.2022 0:00:00', …}
1: {EmployeeID: 3, EmployeeDepartment: 'IT', EmployeeName: 'Jane Doe', DateOfBirth: '13.01.1970 0:00:00', DateOfJoining: '31.12.2018 0:00:00', …}
2: {EmployeeID: 4, EmployeeDepartment: 'Desk', EmployeeName: 'Jack Sparrow', DateOfBirth: '12.06.1983 0:00:00', DateOfJoining: '03.03.2020 0:00:00', …}
3: {EmployeeID: 5, EmployeeDepartment: 'Desk', EmployeeName: 'Julie Moonshine', DateOfBirth: '25.05.1980 0:00:00', DateOfJoining: '01.05.2022 0:00:00', …}
4: {EmployeeID: 6, EmployeeDepartment: 'IT', EmployeeName: 'Victor Vaugh', DateOfBirth: '23.04.1997 0:00:00', DateOfJoining: '01.12.2021 0:00:00', …}
5: {EmployeeID: 7, EmployeeDepartment: 'Boss', EmployeeName: 'Elizabeth Grey', DateOfBirth: '24.04.1954 0:00:00', DateOfJoining: '14.05.1990 0:00:00', …}
length: 6

So, as I understand, the data from API is passed correctly. I searched the internet thoroughly but still have no idea what the issue may be.

My Angular code is mostly based on yt tutorials as it's the first time I'm working with it, and the same solutions seem to work fine for the creators of those tutorials.

Thanks for any help!

CodePudding user response：

Your keys are different than the ones in console.

Although they are same but case sensitive. You are calling keys with inital letter as lowercase however, the initial letters are in upper case for example it should be employee.EmployeeName instead of employee.employeeName. Same goes with all other keys.

CodePudding user response：

You sould use a data serializer which converts your response data into camel case (which is a standard for json property name casing). That is how you will be able to show data in the table.

Otherwise you have to use the same casing as the .Net api models to show data in the angular table. I highly recommend to use a serializer the response data ase camel case.