How to display the images coming from server in angular apps using file reader?

I am fetching ratings of a particular post and then after that iterating over each reviewer, get their imageId and then fetching the image from backend using getImage() (defined in my services) and then using file reader assigning it to a variable and then displaying in the app.component.html file.But the problem is that when I am rendering this image in app.component.html file then I am getting the same image for all the reviewers.

Here is the code for fetching and iterating over each reviewer and then fetching images using imageId of each reviewer:-

```this.locolService.getPlaceRating(this.placeId).subscribe((data) => {
          this.ratings = data; console.log(this.ratings);
          this.ratings.forEach(rating => {
            this.locolService.getImage(rating.reviewer.profilePictureId).subscribe((image) => {
              let reader = new FileReader();
              reader.addEventListener("load", () => {
                this.profileImageOfReviewer = reader.result; // here 
                  assigning the value for displaying

              }, false);
              if (image) {
                reader.readAsDataURL(image);
              }
            })
          });
        });```


Here is the code that I have used to display images in app.component.html file.
```<div *ngFor="let rating of ratings">
        <div class="row">
          <div class="col-md-2">
            <img [src]="profileImageOfReviewer | safe" class="img-fluid rounded-circle">
          </div>
          <div class="col-md-10">
            <p class="highlight mb-0">
              <b>{{rating.reviewer.fullName}}</b> -
             <span class=" " *ngIf="recommended"><i class="material-icons orange600">
                 thumb_up_alt
               </i></span>
             <span class=" " *ngIf="!recommended"><i class="material-icons orange600">
                 thumb_down_alt
               </i></span>
            </p>
            <p class="mb-0  ">
              <span class=" "> {{rating.month }} - {{rating.year}}</span>
            </p>
            <p class="mb-0  ">{{rating.reviewText}}</p><br>
            <ngb-rating [rate]="rating.ratingValue"></ngb-rating>
          </div>
        </div>
        <hr>
      </div>```

It should render images of all the reviewer