Angular table is not showing any content

Issue

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 class="table table-striped">
    <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" class="btn btn-light mr-1">
                    Edit
                </button>
                <button type="button" class="btn btn-light mr-1">
                    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!

Solution

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.

Answered By - Uchiha Madara