当图像从 API 传送时，如何循环遍历 angular 中的图像？

Question

我的数据库中有一个项目列表。每个项目都有一些实体，其中之一是 ImageFileName。此 ImageFileName 表示文件及其扩展名。我想遍历数据库并渲染所有图像及其其他实体。 Html 是：

<div class="col-md-4 card mt-3" *ngFor="let post of specialPosts">
    <div class="bg-image hover-overlay">
      <img [src]="GetImage(post.imageFileName)" class="card-img-top" [alt]="post.title" />
</div>

与此Html相关的组件是：

export class SpecialPostComponent implements OnInit {

  constructor(private postService: PostService) { }

  specialPosts: Post[] = [];

  ngOnInit(): void {
    this.GetSpecialPost();
  }

  GetSpecialPost() {
    this.postService.GetSpecialPost().subscribe(
      response => {
        this.specialPosts = response;
        // console.log(response);
      }
    );
  }
  CreateImageFromBlob(image: Blob) {
    let reader = new FileReader();
    if (image != null) {
      reader.readAsDataURL(image);
      reader.addEventListener("load", () => {
        return = reader.result;
      }, false);
    }
  }
  GetImage(filename: string) {
    this.postService.GetSpecialPostImage(filename).subscribe(
      response => this.CreateImageFromBlob(response)
    );
  }
}

用于连接API的服务是：

export class PostService {

  constructor(private http: HttpClient) {

   }
   GetSpecialPost(): Observable<Post[]>{
     return this.http.get<Post[]>(url.baseURL + '/posts/getspecialpostslist');
   } 
   }
   GetSpecialPostImage(filename: string): Observable<Blob>{
    return this.http.get(url.baseURL + '/posts/getspecialpostimage?filename=' + filename, {"responseType": "blob"});
  }
}

型号：

export interface Post{
    id: number,
    title: string,
    description: string,
    creationDate: string,
    isSpecialPost: boolean,
    isMainPost: Boolean,
    isActive: boolean,
    imageFileName: string,
    name: string
}

问题是，当我构建项目时，CPU 使用率达到 87%，浏览器变得无响应，并且没有图像传送到浏览器。当图像来自 API 时如何循环遍历图像？

更新 1：我将组件代码更改为：

export class SpecialPostComponent implements OnInit {

  constructor(private postService: PostService) { }

  specialPosts: Post[] = [];
  ImageToShow: any;

  ngOnInit(): void {
    this.GetSpecialPost();
  }

  GetSpecialPost() {
    this.postService.GetSpecialPost().subscribe(
      response => {
        this.specialPosts = response;
        this.PrepareImages(this.specialPosts);
        // console.log(response);
      }
    );
  }
  PrepareImages(post: Post[]){
    post.forEach(element => {
      this.ImageToShow = this.GetImage(element.imageFileName);
    });
  }
  CreateImageFromBlob(image: Blob) {
    let reader = new FileReader();
    if (image != null) {
      reader.readAsDataURL(image);
      reader.addEventListener("load", () => {
        return reader.result;
      }, false);
    }
  }
  GetImage(filename: string) {
    this.postService.GetSpecialPostImage(filename).subscribe(
      response => this.CreateImageFromBlob(response)
    );
  }
}

但是，没有显示图像。

Answer 1

我的建议是在获得 specialPosts 后准备图片，然后将 specialPosts 和正确的图片 src 传递给 HTML .

import { forkJoin } from 'rxjs';
.
.

  GetSpecialPost() {
    this.postService.GetSpecialPost().subscribe(
      response => {
        this.specialPosts = response;
        this.prepareImages(this.specialPosts);
      }
    );
  }
  
  CreateImageFromBlob(image: Blob): Promise<any> {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.addEventListener('load', () => {
        resolve(reader.result);
      }, false);

      if (image) {
        reader.readAsDataURL(image);
      } else {
        reject();
      }
    });
  }

  prepareImages(posts: Post[]) {
    forkJoin(
      posts.map(post =>
         this.postService.GetSpecialPostImage(post.filename).pipe(
          mergeMap(async (response: Blob) => {
            post.imageSrc = await this.CreateImageFromBlob(response);
            return post;
          }))
      )
    ).subscribe((posts: Post[]) => {
      this.reviseSpecialPosts = [...posts];
    });
  }

而在 HTML 你只需要传递 imageSrc:

<div class="col-md-4 card mt-3" *ngFor="let post of reviseSpecialPosts">
    <div class="bg-image hover-overlay">
      <img [src]="post?.imageSrc" class="card-img-top" [alt]="post.title" />
    </div>
</div>

当图像从 API 传送时，如何循环遍历 angular 中的图像？

How to loop through images in angular while images are delivered from API?

api

angular