Call Service inside ngFor data?

Ionic Framework ionic-v3
1

Inside this ngFor:

<ion-card *ngFor="let review of reviews">
        <ion-card-content>
            {{getUserName(review.user_ID)}}
        </ion-card-content>
</ion-card>

I need to show the username, but to get user name i need to call user service to get the username. The problem is when i try like this. The page keep loading and loading. What is the correctly way to call service inside ngFor?

This is my getUserName method:

getUserName(userId)
    {
        this.userService.loadUserById(userId)
        .then(dataUser => {
          this.user = dataUser;
        });

        return this.user; 
    }

And when i get the object how to access the object property like in html? (Example: user.firstName). Thanks…

2

You are mixing synchronous and asynchronous code, which is a recipe for disaster. I can think of two choices: either create an object in the backing code that maps user ids to user names, populate it whenever reviews changes, and let angular’s change detection handle the rest, or make getUserName (which should probably be named getUser) return the promise and pass its return value to the AsyncPipe.

3

Thanks , i have change my backend code so i can retrieve data only from reviews.