角轮播不适用于http数据

Question

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

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