如何使用API​​从数据库中获取数组图像并将其转换为JSON数组以在Angular 4中以HTML显示

Question

我想使用api从数据库中获取optionimage，然后将图像值推送到json数组中，以便可以在HTML页面中显示。 我的数据库结构如下。

我尝试了一些获取数据的方法，但是我无法正确选择image并且无法将其转换为JSON数组。 我也尝试过这种方法

 data.survey.forEach(element => {
       var obj = {
       //is_attached_image: false,
       optionimage: element.optionimage,
      // _id: element.group_id._id
       }
      this.slideImages.push(obj);
       console.log(obj)
     });

，但未得到适当的结果。

，我想制作以下optionimage格式，以便可以播放图像循环。 但是为此，我为实现该目标需要做什么感到有些困惑。

this.slideImages = [
  { image: 'http://35.225.229.210:8087//SurveyImages/filename1549712077438.jpeg' },
  { image: 'http://35.225.229.210:8087//SurveyImages/1550305467760.gif' },
  { image: 'http://35.225.229.210:8087//SurveyImages/1547763849215.gif' },
        ]

先谢谢了。

Answer 1

要获取图像网址数组，可以按以下方式生成数组。

const unFlattenedImagesList = data.survey.map(element => {
  res = element.optionimage.map(obj => ({image: `http://35.225.229.210:8087//SurveyImages/${obj[0]}`
  }));
  return res;
})
this.slideImages = [].concat(...unFlattenedImagesList));

我不确定您要显示图像的精确度如何，但是可以使用*ngFor进行迭代，然后将绑定的值传递到src属性，该属性将在<div>

<div *ngFor="let url of slideImages">
  <img src={{url.image}} alt="image">
</div>

Answer 2

我不确定您到底想要什么，但这是我所了解的答案

let URL = "http://35.225.229.210:8087/";
    let slideImages = [];
    data.survey.forEach(element => {
        if(Array.isArray(element.optionimage) && !empty(element.optionimage)) {
            element.optionimage.forEach(img => {
                slideImages.push({image: (URL+img[0])});
            });
        }
    });