Pfthb

Hey guys so i am building an IONIC 3 application which is to access an API and make POST and GET requests. I have a problem in subscribing the data received from the POST request to an Observable variable. My objective of the code is to send a post request and display a list of products from the data returned. The following is my code, however i am unable to subscribe the data to the observable as i do with the get request:

public products_detail: Observable<any>;

 this.httpClient.post("http://www.xxx.asia/app_test/detail_shop_meals.json", postData)
 this.products_detail.subscribe(data => 
 json_load = data.toString();
 this.meal_available = data;
 shop_name = document.getElementById("shop_name").innerHTML = data.shop_name;
 food_type = document.getElementById("food_type").innerHTML = data.shop_description;
 fee = document.getElementById("fee").innerHTML = "฿"+ data.price
 console.log('my data: ', data);
 console.log('look here:', data.detail_meals_popular[0].name)
 //return this.products_detail = json_load;
 , error => 
 console.log(error);
 );

and the html to display the products is as follows:

<h4>Most Popular</h4>
 <ul>
 <li ion-item *ngFor="let x of (products_detail | async)?.detail_meals_popular" (click)="item()">
 <div class="list_circle">
 <img src="assets/imgs/item2.png" alt="food">
 </div>
 <div class="list_circle_detail">
 <h5> x.name </h5>
 <p> x.description </p>
 <strong>฿ x.price </strong>
 </div>
 <div class="clear"></div>
 </li>
 </ul> 

id like to use the observable variable to list the products in my html, thank you in advance for the help guys :-)