猫头鹰旋转木马在 Angular 4 中不起作用答案

【问题标题】：Owl Carousel is not working in Angular 4猫头鹰旋转木马在 Angular 4 中不起作用
【发布时间】：2017-11-11 19:43:13
【问题描述】：

我正在研究 angular 4，我想在我的应用程序中实现 owl carousel。我通过这个链接https://www.npmjs.com/package/ng2-owl-carousel在应用程序中导入了owl carousel。

但图像不会出现。我正在分享我的代码：

home.component.ts

import { Component } from '@angular/core';
import {Http} from '@angular/http';
import {OwlCarousel} from 'ng2-owl-carousel';
import { ViewChild } from '@angular/core'
declare var $:any;
@Component({
    moduleId:module.id,
    templateUrl:'home.component.html'
})

export class HomeComponent{
    public pageTitle:string ='Home';
    @ViewChild('owlElement') owlElement: OwlCarousel       

      fun() {
        this.owlElement.next([200])
        //duration 200ms
      }
      object = {          
        link: "http://lorempixel.com/100/100"
      }

}

home.component.html

<owl-carousel
[options]="{items: 3, 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" [ng-style]="{'background-image':'url(/assets/img/images.jpg)'}"></div>
</div>
</owl-carousel>

app.module.ts

imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    OwlModule
]

只有 next 或 prev 来了，但 Image 没有来。我是 Angular 4 的新手。所以我无法解决这个问题。我已经看到了链接，但我仍然无法解决。

angularjs ng-style: background-image isn't working
Angular 2 - background image into a html file using ngStyle

【问题讨论】：

能否请您提供一个提琴手或 plunker，以便更好地调查问题

标签： javascript twitter-bootstrap angular owl-carousel

【解决方案1】：

我在您的循环中看不到任何图像，请在您的 ngFor 中添加 img：

       <img src="{{image}}" style="" />

并使用

      [ngStyle] and not [ng-style]

【讨论】：

【解决方案2】：

你是否包含了here中给出的css和js

"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/owl.carousel/dist/owl.carousel.js"

]

"styles": [ "../node_modules/owl.carousel/dist/assets/owl.carousel.css", "../node_modules/owl.carousel/dist/assets/owl.theme.default.css" ]

2]不要使用背景图片像下面这样使用 `

可能是图片url路径错误 [ng-style]="{'background-image':'url(/assets/img/images.jpg)'}"

【讨论】：