角猫头鹰轮播不适用于http数据答案

【问题标题】：angular owl carousel not working with http data角猫头鹰轮播不适用于http数据
【发布时间】：2020-06-06 21:23:51
【问题描述】：

我正在通过 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>

【问题讨论】：

标签： angular owl-carousel

【解决方案1】：

使用ViewChild刷新猫头鹰

在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()
}

【讨论】：