Angular 9: ngx-owl-carouel 由于 "Cannot read property '$owl' of undefined" 错误而未呈现
Angular 9: ngx-owl-carouel not rendered because of "Cannot read property '$owl' of undefined" error
我正在尝试在我的项目中实现卡片滑块。实际上,我无法弄清楚为什么 ngx-owl-carousel 没有被渲染并给出了一个烦人的问题。我一步步按照 npm and tried to put inside the Card example on 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"
]
但是在浏览器中它一直抛出这个错误(即使里面没有任何对象)。
从 owl-carousel
标签中删除 [items]="professionals
。
仅当图像数组动态变化时才需要它。
我正在尝试在我的项目中实现卡片滑块。实际上,我无法弄清楚为什么 ngx-owl-carousel 没有被渲染并给出了一个烦人的问题。我一步步按照 npm and tried to put inside the Card example on 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"
]
但是在浏览器中它一直抛出这个错误(即使里面没有任何对象)。
从 owl-carousel
标签中删除 [items]="professionals
。
仅当图像数组动态变化时才需要它。