angular owl 传送带无法处理 http 数据
angular owl carousel not working with http data
我正在通过 http get 获取数据。之后我遍历我的图像并将其添加到图像数组中。如果我直接用图像 url 声明我的数组,它工作正常,但如果我让我的数据异步,它会以这种方式显示:
这是我的 http get 的样子:
这是我的代码:
images = [];
loadRestaurantInfos() {
this.acivatedRoute.paramMap.subscribe(params => {
const url = `http://localhost:5000/location/searchnameonly?searchstring=${params.get('id')}`
const data = this.http.get<any>(url, {
headers: {token: this.apikey},
});
data.subscribe(datavalue => {
this.images = [];
if(datavalue.length>0){
this.dataset = datavalue[0];
this.setUpImageGallery(this.dataset.images);
}else{
this.router.navigate(['locations'])
}
})
});
}
setUpImageGallery(imagedata) {
imagedata.forEach(element => {
this.images.push(element);
});
}
这是我的 html:
<owl-carousel
[options]="{
lazyLoad:true,
responsive:{
'320':{
items:1,
autoplay:true,
loop: true
},
'600':{
items:1.5,
autoplay:true,
loop: false
},
'980':{
items:2,
autoplay:true,
loop: false
},
'1025':{
items: 3,
autoplay:true,
loop: false
}}}">
<div *ngFor="let image of images" class="item">
<img src="{{image}}">
</div>
</owl-carousel>
使用ViewChild
刷新owl
在html
<owl-carousel #owlElement
在组件中
import {OwlCarousel} from 'ngx-owl-carousel';
@ViewChild('owlElement') owlElement: OwlCarousel
在你的函数中
setUpImageGallery(imagedata) {
imagedata.forEach(element => {
this.images.push(element);
});
this.owlElement.refresh()
}
我正在通过 http get 获取数据。之后我遍历我的图像并将其添加到图像数组中。如果我直接用图像 url 声明我的数组,它工作正常,但如果我让我的数据异步,它会以这种方式显示:
这是我的 http get 的样子:
这是我的代码:
images = [];
loadRestaurantInfos() {
this.acivatedRoute.paramMap.subscribe(params => {
const url = `http://localhost:5000/location/searchnameonly?searchstring=${params.get('id')}`
const data = this.http.get<any>(url, {
headers: {token: this.apikey},
});
data.subscribe(datavalue => {
this.images = [];
if(datavalue.length>0){
this.dataset = datavalue[0];
this.setUpImageGallery(this.dataset.images);
}else{
this.router.navigate(['locations'])
}
})
});
}
setUpImageGallery(imagedata) {
imagedata.forEach(element => {
this.images.push(element);
});
}
这是我的 html:
<owl-carousel
[options]="{
lazyLoad:true,
responsive:{
'320':{
items:1,
autoplay:true,
loop: true
},
'600':{
items:1.5,
autoplay:true,
loop: false
},
'980':{
items:2,
autoplay:true,
loop: false
},
'1025':{
items: 3,
autoplay:true,
loop: false
}}}">
<div *ngFor="let image of images" class="item">
<img src="{{image}}">
</div>
</owl-carousel>
使用ViewChild
刷新owl
在html
<owl-carousel #owlElement
在组件中
import {OwlCarousel} from 'ngx-owl-carousel';
@ViewChild('owlElement') owlElement: OwlCarousel
在你的函数中
setUpImageGallery(imagedata) {
imagedata.forEach(element => {
this.images.push(element);
});
this.owlElement.refresh()
}