【问题标题】:Angular 9: ngx-owl-carouel not rendered because of "Cannot read property '$owl' of undefined" errorAngular 9:ngx-owl-carouel 未呈现,因为“无法读取未定义的属性 '$owl'”错误
【发布时间】:2020-03-31 00:19:17
【问题描述】:

我正在尝试在我的项目中实现卡片滑块。实际上,我无法弄清楚为什么 ngx-owl-carousel 没有被渲染并给出一个烦人的问题。我一步一步按照npm 上的指南进行操作,并尝试将Angular Docs 上的卡片示例放入其中。

<owl-carousel
    [options]="{items: 3, dots: false, navigation: false}" [items]="professionals"
    [carouselClasses]="['owl-theme', 'row', 'sliding']">
    <div class="item" *ngFor="let professional of professionals;let i = index">
    <mat-card class="example-card">
        <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
        </mat-card-header>
        <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg"
            alt="Photo of a Shiba Inu">
        <mat-card-content>
        <p>
            The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
            A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
            bred for hunting.
        </p>
        </mat-card-content>
        <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
        </mat-card-actions>
    </mat-card>
    </div>
</owl-carousel>

我还正确导入了 JQuery 和 NGX Carousel(样式表也是):

"styles": [
    "src/styles.scss",
    "./node_modules/owl.carousel/dist/assets/owl.carousel.css",
    "./node_modules/owl.carousel/dist/assets/owl.theme.default.css"
],
"scripts": [
   "./node_modules/jquery/dist/jquery.min.js",
   "./node_modules/owl.carousel/dist/owl.carousel.js"
]

但是在浏览器中它一直抛出这个错误(即使里面没有任何对象)。

【问题讨论】:

    标签: angular owl-carousel


    【解决方案1】:

    owl-carousel 标记中删除[items]="professionals。 仅当图像数组动态变化时才需要。

    【讨论】:

    • 是否动态变化?
    • 嘿,我的数组正在动态变化,但仍然出现此错误:/ 如果删除它,更改数组不起作用
    • 我也有同样的问题 :(
    猜你喜欢
    • 2022-01-08
    • 1970-01-01
    • 2021-05-02
    • 1970-01-01
    • 1970-01-01
    • 2023-01-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多