如何使用 angular 的 ng-gallery 从 angular 10 上的画廊内获取请求获取图像？

Question

我被困在一些硬代码方法中，无法将图像从 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)
      }
    }
  });
});

这段代码给出了下面的结果。

如果你可以查看 stackblitz，你可以在那个例子中看到他使用本地图像，在我的情况下，我应该如何设法获取我的照片？我想 *ngFor 每个画廊的每个 post 我得到 post 图片..

这是我的 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>

抱歉，如果我的问题太长，我只是想为您提供所有帮助我的信息。我需要这个用于一个大项目。谢谢！

Answer 1

您需要根据 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>

如何使用 angular 的 ng-gallery 从 angular 10 上的画廊内获取请求获取图像？

How to get images from get request inside gallery on angular 10 using ng-gallery for angular?

get

image-gallery

typescript

angular