ngx-gallery 图片不显示答案

【问题标题】：ngx-gallery image is not displayedngx-gallery 图片不显示
【发布时间】：2022-07-26 02:33:37
【问题描述】：

Angular ngx-gallery 问题

我能够以 json 格式获取数据而没有任何错误，但 ngx-gallery 似乎没有，它加载到页面详细信息的元素中但图像和 ngx-gallery 模板没有出现，可能没有正在从服务中拍照，但没有出错，这是我的代码：

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()
  }

}

模板：

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

【问题讨论】：

标签： javascript angular

【解决方案1】：

添加以下 CCS 修复解决了我的问题：

ngx-gallery { 
    display: inline-block; 
}

这是对我找到的答案here的轻微修改。

【讨论】：