Я получаю оценки определенного поста, а затем итерирую по каждому рецензенту, получаю их imageId, а затем извлекаю изображение из бэкэнда с помощью getImage () (определено в моих сервисах), а затем с помощью средства чтения файлов присваиваю его переменнойи затем отображается в файле app.component.html. Но проблема в том, что когда я отображаю это изображение в файле app.component.html, я получаю одно и то же изображение для всех рецензентов.
Воткод для извлечения и повторения для каждого рецензента, а затем для извлечения изображений с использованием imageId каждого рецензента: -
```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>```
. Он должен отображать изображения всех рецензентов