Angular 5 , display json in html - html

Question

In my project in Angular 5, I want to display in HTML code parameter "default_price":100, but my code display all default_price.
component.ts
this.ws.getAllProduct().subscribe(
products => {
this.products = products.map((product) => {
return new Product(product);
});
}
);
component.html
<div class="row">
<div class="input-field col s12">
<label for="unit_price" *ngFor="let item of products">{{item.default_price}}</label>
<input formControlName="unit_price" id="unit_price" type="number" class="validate" placeholder="unit_price">
</div>
</div>
Json:
{
"StatusCode": 0, "StatusMessage": "OK", "StatusDescription":
[
{
"product_id": "1",
"product_name": "Product1",
"description": "Product1",
"default_price": 50,
"lastmoduserid": "31",
"lastmoddtm": "2018-02-06T13:26:17.000Z",
"active": 1
},
{
"product_id": "2",
"product_name": "Product2",
"description": "Product2",
"default_price": 60,
"lastmoduserid": "31",
"lastmoddtm": "2018-02-06T13:35:17.000Z",
"active": 1
},
{
"product_id": "3",
"product_name": "Product3",
"description": "Product3",
"default_price": 80,
"lastmoduserid": "31",
"lastmoddtm": "2018-02-06T13:35:22.000Z",
"active": 1
},
{
"product_id": "4",
"product_name": "Product4",
"description": "Product4",
"default_price": 100,
"lastmoduserid": "31",
"lastmoddtm": "2018-02-06T13:25:54.000Z",
"active": 1
},
{
"product_id": "5",
"product_name": "Product5",
"description": "Product5",
"default_price": 120,
"lastmoduserid": "31",
"lastmoddtm": "2018-02-06T13:35:27.000Z",
"active": 1
}
]
}
I want to display in html code only "product_id":"4", "product_name":"Product4".
Can you suggest me some idea?

Answer 1

You don't need ngFor if you need to display particular object, you can use array.find() to find particular element in the array

Answer 2

from your json, products.StatusDescription is the array