錯誤類型錯誤：無法讀取 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
     })
  
 }