Not able to display data from post in ionic - html

Question

I'm trying to get data that I get from a post call and display in my html page in ionic.
My Ts code is
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '#angular/common/http';
#IonicPage()
#Component({
selector: 'page-fashion',
templateUrl: 'fashion.html',
})
export class FashionPage {
users: any;
body: Object = {
"id": 1014,
"filter": null,
"lat": 13.05831,
"lng": 80.21195,
"mapRadius": 5,
"pageSize": 50,
"pageStart": 1,
"priceRangeFrom": 0,
"priceRangeTo": 100000
};
constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {
this.users = this.httpClient.post('myapi',this.body);
this.users.subscribe(data => {
this.users = data;
console.log('my data: ', data);
console.log("the users data ------------>",this.users);
})
}
}
And my html page is
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Fashion</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list inset>
<ion-item *ngFor="let user of (users | async) ">
<h2>{{user.Name}}</h2>
<p>Price : {{user.Price}}</p>
</ion-item>
</ion-list>
</ion-content>
The error is InvalidPipeArgument: '[object Object]
but i am also getting the data before the error message comes, so when i click on close on the above image i am getting my data, but i need to get it as soon as get into the page
EDIT1: I am Getting the data only when i switch to a different tab and come back to this
EDIT2: Guys a I forgot to mention what my api returns, It gives me [34]
i.e.
[{
....
},
..
].

Answer 1

There is an error in your aync pipe declaration it should be like below . Also you are using the same users property to create the Observable and store the data. Create a new property to store the data.
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Fashion</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list inset>
<ion-item *ngFor="let user of userData | async ">
<h2>{{user.Name}}</h2>
<p>Price : {{user.Price}}</p>
</ion-item>
</ion-list>
</ion-content>
edit : create a new property like userData:any[] = [] in your component as use it like below -
export class FashionPage {
users: any;
userData:any[] = []
body: Object = {
"id": 1014,
"filter": null,
"lat": 13.05831,
"lng": 80.21195,
"mapRadius": 5,
"pageSize": 50,
"pageStart": 1,
"priceRangeFrom": 0,
"priceRangeTo": 100000
};
constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {
this.users = this.httpClient.post('myapi',this.body);
this.users.subscribe(data => {
this.userData = data;
console.log('my data: ', data);
console.log("the users data ------------>",this.userData);
})
}
}

Answer 2

Initialize users: any; as users = []; since async requires an
observable or an array
Also change the variable name of subscription,
this.users = this.httpClient.post('myapi',this.body);
to,
this.userResult = this.httpClient.post('myapi',this.body);
change html to <ion-item *ngFor="let user of users | async ">
HTML:
<ion-item *ngFor="let user of users | async ">
<h2>{{user.Name}}</h2>
<p>Price : {{user.Price}}</p>
</ion-item>
So TS:
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '#angular/common/http';
#IonicPage()
#Component({
selector: 'page-fashion',
templateUrl: 'fashion.html',
})
export class FashionPage {
users: any;
....
constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {
this.userResult = this.httpClient.post('myapi',this.body);
this.userResult.subscribe(data => {
this.users = data;
console.log('my data: ', data);
console.log("the users data ------------>",this.users);
})
}
}

Answer 3

The api returns me [34], i.e. array of 34 objects in it.
I needed a separate variable to store the data and to call the api.
So the code that works to get me the data is
HTML code
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Fashion</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-list inset>
<ion-item *ngFor="let user of userData">
<h2>{{user.Name}}</h2>
<p>Price : {{user.Price}}</p>
</ion-item>
</ion-list>
</ion-content>
TS code
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '#angular/common/http';
#IonicPage()
#Component({
selector: 'page-fashion',
templateUrl: 'fashion.html',
})
export class FashionPage {
users: any;
userData = [];
body: Object = {
"id": 1014,
"filter": null,
"lat": 13.05831,
"lng": 80.21195,
"mapRadius": 5,
"pageSize": 50,
"pageStart": 1,
"priceRangeFrom": 0,
"priceRangeTo": 100000
};
constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {
this.users = this.httpClient.post('myapi',this.body);
this.users.subscribe(data => {
this.userData = data;
console.log('my data: ', data);
console.log("the users data ------------>",this.userData);
})
}
}
You guys are always wonderful,this community has never failed me once...Thanks a million to all for your valuable time to get me the answer!!!!!!!!