错误类型错误：无法读取 null 的属性“3”

Question

我正在使用带有 angular 9 的 owlCarousel 来显示视频。 加载时返回错误Cannot read property '3' of null 。

这是我的 html 页面，用于加载 OwlCarousel

<div class="owl-carousel owl-theme">
  <div class="item-video" data-merge="1">
    <a class="owl-video" href="{{data.imageUrl}}"></a>
  </div>
</div>

typescript 档案：

ngOnInit(): void {
 $(document).ready(function(){
     $('.owl-carousel').owlCarousel({
       nav:true,
       items:1,
       autoWidth: true,
       video:true
     })
   });
 }

我会很感激一些帮助。

Answer 1

在我看来，您的轮播在可用之前正在初始化。 为此，您可以对属性使用*ngIf ，当属性为真时，它将被初始化。

<div *ngIf="somePropToBeTruthy" class="owl-carousel owl-theme">
   ...
</div>

Answer 2

您可以像这样在 angular 中使用 carousel 而不是使用 jquery 使用 angular 的功能

<owl-carousel-o [options]="customOptions">
<ng-template carouselSlide *ngFor="let data of sliderImages">
    <div class="slider-item">
        <img [src]="data.image" alt="data.image">
    </div>
</ng-template>

customOptions: OwlOptions = {
    loop: true,
    mouseDrag: true,
    touchDrag: true,
    pullDrag: true,
    autoplay: true,
    rtl: true,
    dots: false,
    navSpeed: 700,
    items: 1,
    responsive: {
        0: {
            items: 1
        },
    },
    navText: ['', ''],
    nav: true,
    autoHeight:true
};


 sliderImages = [
    {
       'image':'abc.png'
    }, {
       'image':'abc1.png'
    }]

Answer 3

我假设 jquery 已正确集成。 然后，您应该将代码放入ngAfterViewInit中，如下所示（ngAfterViewInit 是文档就绪事件的替换），

ngAfterViewInit(): void {
 
     $('.owl-carousel').owlCarousel({
       nav:true,
       items:1,
       autoWidth: true,
       video:true
     })
  
 }