How to refresh data in a Ionic page?

Question

I'm working on Ionic 4 and I'm trying to understand the basic concepts of it. So I have encountered a problem with the application I'm working currently.

One of its function is to display the information of the user, everything shows correctly except two variables. This is my part of .ts of the page

ngOnInit() {
this.slug = this.route.snapshot.paramMap.get('id');
this.loadData(); }

loadData() {
if (this.dataService.loaded) {
  this.userList = this.dataService.getUserlist(this.slug);
} else {
  this.dataService.load().then(() => {
    this.userList = this.dataService.getUserlist(this.slug);
  });
}}

...

displayActvLvl(): string {

let temp: string;
let val: number;
val = this.userList.actLvlVal;
if (val === 1.2) {
  temp = 'No Active';
} else if (val === 1.375) {
  temp = 'Lightly Act';
} else if (val === 1.55) {
  temp = 'Moderate Active';
} else if (val === 1.75) {
  temp = 'Very Active';
} else if (val === 1.9) {
  temp = 'Athlete';
}
return temp;}

displayGender(): string {
if (this.userList.gender) {
  return 'Female';
} else {
  return 'Male';
} }

and this is the two items that are not showing the information

    <ion-row>
  <ion-col size="6">
    <ion-item text-center>
      <ion-label position="stacked">{{displayGender()}}</ion-label>
      <ion-note>Gender</ion-note>
    </ion-item>
  </ion-col>

  <ion-col size="6">
    <ion-item text-center>
      <ion-label position="stacked">{{displayActvLvl()}}</ion-label>
      <ion-note>Activity Level</ion-note>
    </ion-item>
  </ion-col>
</ion-row>

I know the issue but i can not figure out a solution. For what i understand, when the data is loaded from the Data Service, and then the page is initalize, that's when the two functions run but the two items don't refresh themselves. Any help?

this is the load function from the data Service

load(): Promise<boolean> {
return Promise.resolve(true);

} Edit: GetUserList function from the Data Service

getUserlist(id): UserInfo { return this.userList.find(userinfo => userinfo.id === id);}

Answer 1

The async pipe is used with Observables or Promises. Since your functions are synchronous, removing the pipes from the template html should probably fix the issue?