ngx画廊不显示图像

问题描述 投票:0回答:1

Angular 7 ngx-画廊

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

import {
  NgxGalleryOptions,
  NgxGalleryImage,
  NgxGalleryAnimation
} from "ngx-gallery";

@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;
  photos: Photo[] = []
  galleryOptions: NgxGalleryOptions[];
  galleryImages: NgxGalleryImage[];

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

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

  getPhotosByCity(cityId){
    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: '100%',
          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"></ngx-gallery>

angular7
1个回答
0
投票

@@ yunus,请您说清楚些吗?您写了什么来解决代码中的问题?

© www.soinside.com 2019 - 2024. All rights reserved.