kolkov/ngx-gallery 不显示图像

Question

我是 Angular 的新手，我正在尝试在我的项目中添加图片库。 如果使用 this.galleryImages[] 中的硬编码数据，则图片库可以工作，但是当我将订阅数据传递给 this.galleryImages[] 时，它没有显示任何内容。注意我可以在控制台中看到我的数据。它不仅绑定在 Ngx 库中。

这是 ngx-gallery repo 的链接：

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

这是显示我的画廊的图像，但仅在我输入硬编码数据时显示，而不是来自我的库的数据 Image

这是我来自服务的数据：

  [
    {
    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>

Answer 1

为以下类更改 css ngx-gallery-layout 即

.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) 文件中