Angular 9: ngx-owl-carouel не отображается из-за ошибки «Не удается прочитать свойство $ owl» с неопределенным значением » - PullRequest
0 голосов
/ 31 марта 2020

Я пытаюсь внедрить слайдер карт в свой проект. На самом деле, я не могу понять, почему ngx-owl-carousel не рендерится и создает досадную проблему. Я следовал пошаговому руководству по npm и пытался поместить в пример карты на Angular Документы .

<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"
]

Но в браузер продолжает выдавать эту ошибку (даже без какого-либо объекта внутри).

Browser Console Error

1 Ответ

0 голосов
/ 07 мая 2020

Удалить [items]="professionals из тега owl-carousel. Требуется, только если массив изображений динамически изменяется.

...