ОШИБКА TypeError: не удается прочитать свойство '3' с нулевым значением

#jquery #angular #owl-carousel

#jquery #угловой #owl-карусель

Вопрос:

Я использую OwlCarousel с angular 9 для показа видео. При загрузке возвращается ошибка 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
     })
   });
 }

Я был бы благодарен за некоторую помощь.

1. Пожалуйста, проверьте в отладчике, к какому массиву owlcarousel обращается с индексом 3 и каково его содержимое.

2. Я бы предложил использовать библиотеку, которая поддерживает angular. Использование jquery с Angular не имеет смысла. И это только все усложнит.

3. ngx-owl-carousel-o Например. npmjs.com/package/ngx-owl-carousel-o

Ответ №1:

Мне кажется, что ваша карусель инициализируется до того, как она станет доступной. Для этого вы можете использовать *ngIf для свойства, когда свойство соответствует действительности, оно будет инициализировано.

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

Ответ №2:

Вы можете использовать carousel в angular следующим образом вместо использования 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'
    }]

Ответ №3:

Я предполагаю, что jquery правильно интегрирован. Затем вы должны поместить код внутрь ngAfterViewInit , как показано ниже (ngAfterViewInit заменяет событие готовности документа),

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