angular - ngx-owl-carousel 在 Angular 6 中不起作用

Question

我有一个简单的 Angular 6 应用程序，我添加了一个simple ngx-owl-carousel，我按照说明执行了所有步骤，这里是链接：https ://www.npmjs.com/package/ngx-owl-carousel 。

这是我的html：

<owl-carousel
[options]="{items: 4, dots: false, navigation: false}"
[items]="images"
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let image of images;let i = index">
    <div class="thumbnail-image"></div>
  </div>
</owl-carousel>

这是 component.ts 图像数组

export class WhatwedoComponent {
  images = [
    '/assets/images/ico_1_dark.png',
    '/assets/images/ico_2_dark.png',
    '/assets/images/ico_3_dark.png',
    '/assets/images/ico_4_dark.png',
  ];

}

不幸的是，我的应用程序中根本没有显示轮播；在控制台浏览器中没有错误。

我的代码有什么问题？，任何帮助都将不胜感激。

标签： angularhtmltypescriptowl-carousel-2

Answer 1

您缺少 img 元素。

<img [src]="image"/>

进行以下调整。

<owl-carousel
[options]="{items: 4, dots: false, navigation: false}"
[items]="images"
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let image of images;let i = index">
    <div class="thumbnail-image">
       <img [src]="image"/>
     </div>
  </div>
</owl-carousel>