Angular not able to get the attribute contents in view

The product.component.ts is a component from where I'm fetching the data from the backend using the httpclient Service but when I display the product variable in the ngOninit() I get undefined, so none of them are displayed in the view but when the value of product variable is logged using console.log() I get all the list of products from the backend am I doing anything wrong here? Below is the code.

product.component.ts

import { Component, OnInit } from '@angular/core';
import {Product} from '../app-models/product.model';
import {ProductService} from '../app-services/product.service';

@Component({
selector: 'app-product-listing',
templateUrl: './product-listing.component.html'
})
export class ProductListingComponent implements OnInit {
product: Product;

constructor(private productService: ProductService) { }

ngOnInit() {
this.productService.getAllProducts().subscribe(
response => {
this.product = response;
console.log(JSON.stringfy(response));
},
error => {
console.log('error:: ' + JSON.stringify(error));
}
);
}
}


product.component.html

<div class="featured_slider_item" *ngFor="let p of product">
<div class="border_active"></div>
<div class="product_item discount d-flex flex-column align-items-center justify-content-center text-center">
<div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="../../assets/images/featured_1.png" alt=""></div>
<div class="product_content">
<div class="product_price discount">₹ {{ p.offerPrice }}<span><del>₹ {{ p.price }}</del></span></div>
<div class="product_name"><div><a>{{ p.code }}</a></div>
</div>
<div class="product_extras">
<div class="product_color">
<input type="radio" checked name="product_color" style="background:#b19c83">
<input type="radio" name="product_color" style="background:#000000">
<input type="radio" name="product_color" style="background:#999999">
</div>
<button class="product_cart_button" (click)="addToCart( p )">Add to Cart</button>
</div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
</div>


productService.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {ApplicationProperties} from '../properties/applicationproperties';
import {Product} from '../app-models/product.model';

@Injectable()
export class ProductService {
private getAllProductsUrl = ApplicationProperties.BackendRestUrl + 'getAllProducts';

constructor(private httpClient: HttpClient) {}

getAllProducts() {
return this.httpClient.get<Product> (this.getAllProductsUrl);
}
}


product.model.ts

export interface Product {
id: number;
code: string;
description: string;
stock: number;
price: number;
offerPrice: number;
image: Blob;
createdOn: string;
lastUpdatedOn: string;
}


2 Answers
2

There was an external JS included which was stopping the products from being displayed. The code works fine!

In your service.ts where you have written the http get request you can make the following changes

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {ApplicationProperties} from '../properties/applicationproperties';
import {Product} from '../app-models/product.model';
import {map} from 'rxjs/add/operator/map;
@Injectable()
export class ProductService {
result:Product;
private getAllProductsUrl = ApplicationProperties.BackendRestUrl + 'getAllProducts';

constructor(private httpClient: HttpClient) {}

getAllProducts() {
return this.httpClient.get<Product> (this.getAllProductsUrl).map(res=>this.result=res.json().data);
}
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.