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',
  ];

}

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

我的代码有什么问题吗？任何帮助都将被取消。

Answer 1

我可以在Angular 6应用中正常使用ngx-owl-carousel，所以问题不在于您使用的Angular版本。我建议你继续挖掘！祝你好运。

Answer 2

您缺少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>

ngx-owl-carousel无法在角度6中工作

2 个答案: