Not showing my data in Angular UI but showing data to my console

Question

I am just facing a strange problem. data is not showing to my angular UI. but when i used postman to show data,it works but from angular it not works. here is my code:-

Products.ts

export interface Products {
    Id : number;
    Name : string;
    Image : string;
    WarehouseList : string;
  }

Product.component.ts

import { Component, OnInit } from '@angular/core';
import { EmployeeService } from '../services/employee.service';
import { ProductService } from '../services/product.service';

import { Products } from '../_interfaces/Products';

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

  
  product : Products[];

  constructor(private service: ProductService) { }

  ngOnInit(): void {
    this.service.getAllProduct().subscribe(data=>{
      this.product=data;
      console.log(data);
  })
}
}

Product.component.html

 <div class="container">
    <button type="submit" class="btn btn-success">ADD EMPLOYEE</button>
    <table class="table table-striped" *ngIf="product">

        <thead>
            <tr>
                <th> Name</th>
                <th>WarehouseList</th>
                <th>Image</th>
                <th>Action</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let em of product">

                <td>{{em.Name}}</td>
                <td>{{em.Image}}</td>
                <td>{{em.WarehouseList}}</td>
                <td>Action</td>


            </tr>
        </tbody>

    </table>
</div>

Product.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Products } from '../_interfaces/Products';


@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private http : HttpClient) { }

  readonly baseUrl = "https://localhost:5001/api/product";

  


  getAllProduct()
  {
    return this.http.get<Products[]>(this.baseUrl);
  }

  
}

here is my output:-

I found my data in my console but not in UI! I am an absolute beginner.I think it should work because i am done already all of necessary things,but why i am facing this kind of annoying issue i am really don't know. how i solve this issue?

UPDATE

Here is my backend code

productController.cs

     [HttpGet]
        public async Task< ActionResult<List<ProductToReturnDto>>> GetProducts()
        {
           
            
            var product = await _repo.GetProductsAsync(); 

            return product.Select(product => new ProductToReturnDto{ 

                Id = product.Id,
                Name = product.Name,
                Image = product.Image,
                WarehouseList = product.WarehouseList.WarehouseList,
                
            }).ToList();                          
        }

Your response property names are in camel case, and your interface is in pascal case. Change the interface to be in camel case, too. — R. Richards, Sep 02 '22 at 11:42
Make the first letter of the property names in your Product interface lower case. Do the same in the template code, too. Then, make an effort to do some research on what the difference is between camel and pascal cases. — R. Richards, Sep 02 '22 at 12:05
Does this answer your question? [ASP.NET Core 3.0 System.Text.Json Camel Case Serialization](https://stackoverflow.com/questions/58476681/asp-net-core-3-0-system-text-json-camel-case-serialization) Another approach is configure the API to return the properties as Pascal Case. — Yong Shun, Sep 02 '22 at 12:17

score 1 · Accepted Answer · answered Sep 02 '22 at 13:08

Change

export interface Products {
    Id : number;
    Name : string;
    Image : string;
    WarehouseList : string;
  }

to

export interface Products {
    id: number;
    name : string;
    image : string;
    warehouseList : string;
  }

And

<td>{{em.name}}</td>
<td>{{em.image}}</td>
<td>{{em.warehouseList}}</td>
<td>Action</td>

Not showing my data in Angular UI but showing data to my console

1 Answers1