kolkov/ngx-gallery未显示图像 [英] kolkov/ngx-gallery not displaying Image

问题描述

我是Angular的新手，我想在我的项目中添加图片库.如果在this.galleryImages []中使用硬编码数据，则图库会起作用，但是当我将订阅数据传递到this.galleryImages []中时，它什么也不会显示.注意我可以在控制台中看到我的数据.它不仅绑定在Ngx画廊中.

I'm new to Angular, I'm trying to add Image gallery in my project. Image gallery works if use the hard coded data in this.galleryImages[] but when I pass my subscribe data into this.galleryImages[] it not showing anything. Note I can see my data in console. Its not only binding in Ngx gallery.

这是ngx-gallery repo的链接形式:

This is the link form ngx-gallery repo:

https://www.npmjs.com/package/@kolkov/ngx-画廊

这是显示我的画廊的图像，但仅显示当我输入硬编码数据而不是来自我的图书馆的数据时的图像图片

This is the image showing my gallery but only showing when I input hardcoded data not the data coming from my library Image

这是我来自服务的数据:

This is my data coming from services:

  [
    {
    productId: 86,
    name: "Umer",
    category: "Mobile",
    details: "Test ",
    productBlob: [
    {
    imageName: "8cd3713d-6fee-45e9-99bc-123149061d9a.jpg",
    imagePath: "https://localhost:44362/images/8cd3713d-6fee-45e9-99bc-123149061d9a.jpg"
    },
    {
    imageName: "9f454a3d-6f8d-431c-8951-5665cf4c96de.jpg",
    imagePath: "https://localhost:44362/images/9f454a3d-6f8d-431c-8951-5665cf4c96de.jpg"
    }
   ]
 }
    ]

下面是我的代码:

    public productObject=[];
    galleryOptions: NgxGalleryOptions[] ;
    galleryImages: NgxGalleryImage[];
    newgalleryImages= []

ngOnInit(): void {

    this.getGalleryOptions();
    this.getoptionsIamges()
 }

    
    this.galleryOptions = [
          {
            width: '600px',
            height: '400px',
            thumbnailsColumns: 4,
            imageAnimation: NgxGalleryAnimation.Slide
          },
          // max-width 800
          {
            breakpoint: 800,
            width: '100%',
            height: '600px',
            imagePercent: 80,
            thumbnailsPercent: 20,
            thumbnailsMargin: 20,
            thumbnailMargin: 20
          },
          // max-width 400
          {
            breakpoint: 400,
            preview: false
          }
        ];

this.galleryImages = this.getoptionsIamges()
    }


getoptionsIamges(){ this._productservice.getproductId$
    .subscribe((data) => {
      this.productObject = data
      this.newgalleryImages.push({
            small:  data.productBlob[0].imagePath,
            medium: data.productBlob[0].imagePath,
            big:    data.productBlob[0].imagePath
            })
            console.log("Receiving Data "+JSON.stringify(this.newgalleryImages))  
 }) 
//I am aware this is showing empty How to bring the value in this I do not know. :(
return this.newgalleryImages 
}

HTML代码:

<ngx-gallery *ngIf="galleryImages"  [options]="galleryOptions" [images]="galleryImages" class="ngx-gallery"></ngx-gallery>

推荐答案

更改以下类的CSS ngx-gallery-layout 即

change css for the following class ngx-gallery-layout i.e

.ngx-gallery-layout {
    width: 100%;
    height: 100%; //change this  
    display: flex;
    flex-direction: column;
}

类似

.ngx-gallery-layout {
    width: 100%;
    height: 350px; //
    display: flex;
    flex-direction: column;
}

将其放置在全局css(style.css)文件中

place it in the global css(style.css) file

这篇关于kolkov/ngx-gallery未显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！