Can not show data to angular component with angular service

Question

I may be making a silly mistake somewhere but I'm tired of searching around, didn't understand the problem. I'm trying to show api response to table but nothing showing at all.

My api returns following response

[{"productId":1,"productName":"tomato","productPrice":200,"productQuantity":5,"catId":1},{"productId":2,"productName":"potato","productPrice":33,"productQuantity":44,"catId":2}]

My Service Class

import { Injectable, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Iproducts } from '../model-ts/products';


@Injectable({
  providedIn: 'root'
})
export class GetprodlistService {
  myAppUrl: string = ""; 
  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    this.myAppUrl = baseUrl;
  }
  getproducts(): Observable<Iproducts[]> {
    return this.http.get<Iproducts[]>(this.myAppUrl + 'api/admin/manageproducts/getproducts');

  }
}

Iproducts Interface Class

export interface Iproducts {
  ProductId: number,
  ProductName: string,
  ProductPrice: number,
  ProductQuantity: number,
  CatId: number
}

Compoenent.ts file is :

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { GetprodlistService } from '../../Services/getprodlist.service';

@Component({
  selector: 'app-manage-products',
  templateUrl: './manage-products.component.html',
  styleUrls: ['./manage-products.component.css']
})
export class ManageProductsComponent implements OnInit {


  constructor(public http: HttpClient, public productservice: GetprodlistService) {
    this.getproducts();
  }
  public prodlist = [];

  getproducts() {
    this.productservice.getproducts().subscribe(
      data => this.prodlist=data);
    console.log("product list: " + this.prodlist)
  }

  ngOnInit(): void {

  }

}

My Component.html file is :

<p *ngIf="!prodlist"><em>Loading...</em></p>
<table class='table' *ngIf="prodlist">
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Price</th>
      <th>Product Quantity</th>
      <th>Category ID</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let prod of prodlist">
      <td>{{ prod.ProductId }}</td>
      <td>{{ prod.ProductName }}</td>
      <td>{{ prod.ProductPrice }}</td>
      <td>{{ prod.ProductQuantity }}</td>
      <td>{{ prod.CatId }}</td>

    </tr>
  </tbody>
</table>

Thank you

Answer 1

You are accessing the properties of the response data in wrong way. Your type definition model is also incorrect.

Type definition

export interface Iproducts {
  productId: number,
  productName: string,
  productPrice: number,
  productQuantity: number,
  catId: number
}

HTML

<p *ngIf="!prodlist"><em>Loading...</em></p>
<table class='table' *ngIf="prodlist">
  <thead>
    <tr>
      <th>Product ID</th>
      <th>Product Name</th>
      <th>Product Price</th>
      <th>Product Quantity</th>
      <th>Category ID</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let prod of prodlist">
      <td>{{ prod.productId }}</td>
      <td>{{ prod.productName }}</td>
      <td>{{ prod.productPrice }}</td>
      <td>{{ prod.productQuantity }}</td>
      <td>{{ prod.catId }}</td>

    </tr>
  </tbody>