问如何在angular 10上使用ng-gallery for angular从get请求中获取图片？
EN

Stack Overflow用户

提问于 2020-11-04 12:12:47

回答 1查看 423关注 0票数 0

我被一些硬编码方法困住了，无法将图像从api直接带到图库或lightbox中……我找不到任何教程，所以我找到了这个例子：

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，你可以在这个例子中看到他使用本地图像，在我的情况下，我应该如何设法获得我的照片？我想为我得到的每个帖子图片的每个图库* to。

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

如果我的问题太长，我很抱歉，我只是想给你所有的信息，以帮助我。我需要这个做一个大项目。谢谢!

angular

typescript

get

image-gallery

9.9元起，最快1天搭建自有直播

提供高并发、低延迟、易接入、极速高清的音视频直播服务，适用于直播电商/在线教育/音视频互动等多种场景

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-11-04 13:11:23

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