ngx-gallery 图像未显示

Question

Angular ngx-gallery problem

I was able to take data in json format without any errors, but ngx-gallery doesn't seem, it loaded in the element in the page details but the images and the ngx-gallery template do not appear, It may not be taking photos from the service, but didn't make a mistake, here is my code:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NgxGalleryAnimation, NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery';
import { City } from 'src/app/models/city';
import { Photo } from 'src/app/models/photo';
import { CityService } from 'src/app/services/city.service';

@Component({
  selector: 'app-city-detail',
  templateUrl: './city-detail.component.html',
  styleUrls: ['./city-detail.component.css'],
  providers: [CityService]
})
export class CityDetailComponent implements OnInit {


  constructor(private activatedRoute: ActivatedRoute, private cityService: CityService) { }

  city: City;
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];
  photos: Photo[] = [];



  ngOnInit(): void {
    this.activatedRoute.params.subscribe(params => {
      this.getCityById(params["cityId"])
    })
  }

  getCityById(cityId: string) {
    this.cityService.getCityById(cityId).subscribe(data => {
      this.city = data;
    })
  }

  getPhotosByCity(cityId: string): void{
    this.cityService.getPhotosByCity(cityId).subscribe(data=>{
     
      this.photos = data;
      this.setGallery();
    })
  }

  getImages(){
    const imageUrls= []
    for(let i = 0;i<this.city.photos.length;i++){
      imageUrls.push({
        small:this.city.photos[i].url,
        medium:this.city.photos[i].url,
        big:this.city.photos[i].url
      })
    }
    return imageUrls;
  }

  setGallery() {
    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.getImages()
  }

}

Template:

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

Answer 1

Adding the following CCS fix solved the problem for me:

ngx-gallery { 
    display: inline-block; 
}

This is a slight modification to the answer I found here .

Answer 2

Add the following to CityDetailComponent.css

ngx-gallery { display: inline-block; margin-bottom: 20px; }