angular7 - ngx-gallery 不显示图像

Question

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

Answer 1

本教程已完成

https://github.com/lukasz-galka/ngx-gallery-demo/blob/master/src/app/app.component.ts 使用方法addImage解决您的问题

帮助这张图片

 private loadAll() {
    this.imageService.getAllImage).subscribe(result => {
        this.addImage(result);
            });
        }


addImage(images: any[]): void
   images.forEach(image=>{  
        this.onlyPreviewExample.images.push(this.getImage(this.getRandomInt(1,2),doc));
      });
    }



private getImage(index: number, image?: any): NgxGalleryImage {
        return {
            big: 'imageUrl'
        }
    }


 private getImages(): NgxGalleryImage[] {
        let images = new Array<NgxGalleryImage>();
        return images;
    }


 private getRandomInt(min: number, max: number) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }


ngOnInit() {
        this.ngxGalleryModel = new Array<NgxGalleryModel>();
        this.ngxGalleryModel.push(
        this.onlyPreviewExample = new NgxGalleryModel('Only preview', this.getImages(), [{
            image: false,
            thumbnails: false,
            previewCloseOnClick: true,
            previewCloseOnEsc: true,
            previewZoom: true,
            previewRotate: true,
           // previewDownload: true,
            previewFullscreen: true,
            previewKeyboardNavigation: true,
            arrowNextIcon: "fa fa-arrow-left",
            arrowPrevIcon: "fa fa-arrow-right",
            fullscreenIcon: "fa fa-arrows-alt",
            width: '0px',
            height: '0px'
        }])
        )
    }


 @ViewChild('onlyPreviewGallery', {static: false}) onlyPreviewGallery: NgxGalleryComponent;
    ngxGalleryModel: NgxGalleryModel[];
    onlyPreviewExample: NgxGalleryModel;