如何使用ng-gallery获取Angular 10画廊上的获取请求中的图像？

问题描述

我被困在某种硬编码方法上，以将来自api的图像直接带入图库或灯箱... 我找不到任何教程，所以我找到了这个例子：

https://stackblitz.com/edit/ngx-gallery-imageviewer

我试图为代码更改它，并设法将图像存储在数组中，但是我不知道如何像这些家伙一样或类似的东西将它们传递给属性。

在这一点上，我必须将图像传递给具有某些属性的变量：

我的代码：

 allImages: PostG[] = [];

fetch(this.apiKey)
  .then(response => {
    if (response.ok) {
      return response.json();
    };
  })
  .then((j: any) => {
   
    const image = [...j.data.post.map(item => item.images)];
    
    image.forEach((image: PostG[]) => {
      var obj = {
        image:image,}
      this.allImages = [...image];
  return{
        type: "imageViewer",imagesGallery: {
        srcUrl: console.log(this.allImages),previewUrl: console.log(this.allImages)
      }
    }
  });
});

以下代码为我提供了此结果。

如果您可以检查一下堆叠闪电，您可以在该示例中看到他使用本地图像，就我而言，我应该如何获取照片？ 我想为ng图片提供的每个帖子的每个画廊。.

这是我尝试执行的HTML：

<ion-col class="ion-no-padding" size-md="12" size-lg="12" size-sm="12" size-xs="12" *ngFor="let post of allPosts | sortPipe"> 

//then the gallery inside:

<div class="basic-container">
    <h2>Basic Example</h2>
    <gallery id="basic-test" fluid [items]="items" [itemTemplate]="itemTemplate" [gestures]="false"></gallery>
  </div>

  <!-- create a template to use the imageviewer -->
  <ng-template #itemTemplate let-index="index" let-type="type" let-data="{{this.allImages}}" let-currIndex="currIndex">
    <ng-container *ngIf="type === 'imageViewer' && index === currIndex" >
      <ngx-imageviewer [src]="this.allImages"></ngx-imageviewer>
    </ng-container>
  </ng-template>

很抱歉，如果我的问题过长，我只想向您提供所有信息以帮助我。我需要一个大型项目。谢谢！

解决方法

您需要根据ngx-gallery从响应中创建JSON。

有关更多说明，请检查此example。

我试图创建与您当前所面临的场景相同的场景

尝试这样的事情。

this.response.data.post.forEach(post => {
  post.galleryImages = post.images.map(image => {
    return new ImageItem({ src: image,thumb: image });
  });
});

并在HTML文件中创建JSON之后

<div class="basic-container" *ngFor="let post of response.data.post; let i=index">
    <h2>{{post.title}}</h2>
    <p>{{post.description}}</p>
    <gallery id="basic-test_{{i}}" fluid [items]="post.galleryImages" [gestures]="false">
    </gallery>
</div>