angular - 如何使用ng-gallery for angular从角度10的画廊内的get请求中获取图像？

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 每个画廊的每个帖子我得到的帖子图片..

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

对不起，如果我的问题太长，我只想给你所有帮助我的信息。我需要这个来做一个大项目。谢谢！

标签： angulartypescriptgetimage-gallery

Answer 1

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

有关更多说明，请查看此示例。

我试图创建与您现在面临的相同场景

尝试这样的事情。

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>