我能够以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>
@@ yunus,请您说清楚些吗?您写了什么来解决代码中的问题?