Angular 角度owl旋转木马无法处理http数据

我通过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'])
    }
  })
 });

}

这是我的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

在你的职责范围内

setUpImageGallery(imagedata) {
  imagedata.forEach(element => {
    this.images.push(element);
  });
  this.owlElement.refresh()
}

import {OwlCarousel} from 'ngx-owl-carousel';

@ViewChild('owlElement') owlElement: OwlCarousel

setUpImageGallery(imagedata) {
  imagedata.forEach(element => {
    this.images.push(element);
  });
  this.owlElement.refresh()
}