Problema angular de la galería ngx
Pude tomar datos en formato json sin ningún error, pero ngx-gallery no parece, se cargó en el elemento en los detalles de la página, pero las imágenes y la plantilla de ngx-gallery no aparecen, es posible que no esté tomando fotos. del servicio, pero no cometí un error, aquí está mi código:
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() } }Modelo:
<ngx-gallery *ngIf="galleryImages" [options]="galleryOptions" [images]="galleryImages" class="ngx-gallery"></ngx-gallery>