Angular Material not able to display data fetch via API

Issue

I am trying to create an Angular dashboard with.Net Core as the backend. I created two component component1 and component2. When I tried to fetch the data in component1 via API, it is working fine, but when I tried the same thing for component2, the data was not visible on the front end but was displayed on the console. I am not sure what exactly the issue is here. I am using Material for the project

labour-charge-type.service.ts

 import { Injectable } from '@angular/core';
import { LabourChargeType } from '../models/labour-charge-type';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class LabourChargeTypeService {
  private url="LabourChargeType";

  constructor(private http:HttpClient ) { }
  public getLabourChargeType():Observable<LabourChargeType[]>{
    return this.http.get<LabourChargeType[]>(`${environment.apiUrl}/${this.url}`);
  }
}

labour-charge-type.component.html

<div class="maindiv">
    <div class="row ">
        <div class="col-md-12">
            <h3>Labour Charge Type</h3>
        </div>
    </div>
    <div>
        <hr>
    </div>
    <div class="table-container">
        <table class="custom-table">
            <thead>
                <tr>
                    <th class="custom-header">Name</th>
                    <th class="custom-header">Code</th>
                    <th class="custom-header">Status</th>
                    <th class="custom-header">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr class="table-row" *ngFor="let cs of labourchargetype">
                    <td class="table-data">{{ cs.LabourChargeTypeName }}</td>
                    <td class="table-data">{{ cs.LabourChargeTypeCode }}</td>
                    <td class="table-data">{{ cs.LabourChargeTypestatus }}</td>
                    <td class="table-data">
                        <button class="edit-button">Edit</button>
                        <button class="delete-button">Delete</button>
                    </td>
                </tr>
            </tbody>
        </table>        
    </div>
    </div>

labour-charge-type.component.ts

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
import { LabourChargeType } from 'src/app/models/labour-charge-type';
import { LabourChargeTypeService } from 'src/app/services/labour-charge-type.service';

@Component({
  selector: 'app-labour-charge-type',
  templateUrl: './labour-charge-type.component.html',
  styleUrls: ['./labour-charge-type.component.scss']
})
export class LabourChargeTypeComponent implements OnInit {
  labourchargetype: LabourChargeType[] = [];
  constructor(private router: Router, private dialog: MatDialog, private labourChargeTypeService: LabourChargeTypeService) {}

  ngOnInit(): void {

    this.labourChargeTypeService.getLabourChargeType()
    .subscribe(
      (labourcharget: LabourChargeType[]) => {
        console.log('API Response:', labourcharget);
        this.labourchargetype = labourcharget;
      },
      error => {
        console.error('Error fetching data:', error);
      }
    );
   }
  }
}

the data is displayed in the console

Solution

change cs.LabourChargeTypeName to cs.labourChargeTypeName as it shows in the console log

Answered By - Stanley Mohlala