在Angular中读取多个图像 [英] Reading multiple images in Angular

问题描述

我正在使用Angular，在评论列表中，我想显示评论列表.对于每个评论，我想显示其内容和作者的个人资料图片.我成功地获得了评论列表，但是我以错误的顺序获得了图像列表.我认为这是一个同步问题.

I'm using Angular, in a comments list, I want to display the list of comments. For every comment, I want to display its content and the profile image of its author. I get the list of comments successfully, but I get the list of images in a wrong order. I think it's a problem of synchronization.

您可以在下面看到该函数的代码.

You can see below the code of the function.

  comments;
  comments_images=[];

  get_comments(){
    let promise = new Promise((resolve, reject) => {
      this.myService.course_comments(this.course.id)
        .toPromise().then(
          res => {     
            this.comments=res;

            this.comments.forEach((comment)=> {

                this.myService.student_image(comment.student_id).subscribe(
                  res2=>{
                         const reader = new FileReader();
                          reader.readAsDataURL(res2); 
                          reader.onloadend = ()=> {
                            this.comments_images.push(reader.result); 
                          }    
                  }
                );
             });

             resolve();
             return promise;
          }
        )
    }); 
  }

推荐答案

在将图像推入数组时，使用Student_id将其推入数组，就像

While pushing images to an array, Push it with student_id, like

this.comments_images.push({id:comment.student_id, img: reader.result}); 

或者更好地将img保留在注释数组本身中，例如

or better keep img in comments array itself like

this.comments.forEach((comment)=> {

            this.myService.student_image(comment.student_id).subscribe(
              res2=>{
                     const reader = new FileReader();
                      reader.readAsDataURL(res2); 
                      reader.onloadend = ()=> {
                        comment.images = reader.result; 
                      }    
              }
            );
         });

因此，每个评论都将正确地显示其图像.您可以像这样轻松阅读

So each comment will have their image with no mistake. You can easily read it like

<div *ngFor="let comment of comments">
 <img src="{{comment.image}}" /> <span>{{comment.message}}</span>
</div>

这篇关于在Angular中读取多个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！