Displaying a result of a promise in the view

Ionic Framework ionic-v3
1

Hi everyone i got a function that returns a promise ( array of users)
and I want to display these users in an ionic card how could that be done?

Screenshot_2
Screenshot_2.png842×70 4.43 KB

appreciate all replies :slight_smile:

2

in your component:

usersList:any [];

then when you are calling the funciton;

this.fireStoreProvider.getUsersByHostpital(this.param1)
.then(users=>{
this.usersList = users;
});

and in your html;

<ion-card *ngFor="let user of userList">

  <ion-card-header>
    {{user.name}}
  </ion-card-header>

  <ion-card-content>
    {{user.whatEverInfo}}
  </ion-card-content>

</ion-card>

this code is not tested but its something very similar to this.

3

This could also be done using the async pipe (https://angular.io/api/common/AsyncPipe).

usersList:any [];

this.fireStoreProvider.getUsersByHostpital(this.param1).then(users => {
    this.usersList = users;
});

and in the html

<ion-card *ngFor="user of userList | async">
    <ion-card-header>
       {{user.name}}
    </ion-card-header>
</ion-card>

This avoids any problem with userList not being available when the page first loads due to it being a promise.

4