Как отобразить изображения, поступающие с сервера, в угловых приложениях с помощью программы чтения файлов? - PullRequest
Новая
       20

Как отобразить изображения, поступающие с сервера, в угловых приложениях с помощью программы чтения файлов?

0 голосов
/ 20 мая 2019

Я получаю оценки определенного поста, а затем итерирую по каждому рецензенту, получаю их 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>```

. Он должен отображать изображения всех рецензентов

1 Ответ

1 голос
/ 20 мая 2019

Если вы получаете одно изображение, то внутри *ngFor то же самое изображение повторяется. поэтому, если у нас есть несколько изображений, мы сопоставляем этот imageArray с массивом оценок и повторяем разные изображения для каждой итерации

...