owl-carousel 不適用於 angular 中的 *ngfor 循環和 html 模板

Question

我有 html 5 模板，我將它與使用 owl-carousel 的 angular 9 一起應用，並且它與 static 數據一起工作正常。 我想將動態數組與貓頭鷹輪播一起使用，我正在使用 *ngfor 循環，但它無法正常工作。 當我嘗試使用循環時，所有項目都是垂直的，並且圖像無法正確顯示。

 <div class="page-content"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="heading-title-alt text-left "> <h3 class="text-uppercase">portfolio Carousel</h3> <span class="text-uppercase">Lid est laborum dolo rumes fugats untras.</span> </div> <.--portfolio carousel--> <div *ngFor="let item of imageArr"> <div id="portfolio-carousel" class="portfolio-with-title col-3 portfolio-gallery"> <div class="portfolio-item"> <div class="thumb"> <img src="assets/img/portfolio/01.jpg" alt=""> <div class="portfolio-hover"> <div class="action-btn"> <a href="assets/img/portfolio/01.jpg" class="popup-gallery" title="lightbox view"> <i class="icon-basic_magnifier"></i> </a> </div> </div> </div> <div class="portfolio-title"> <h4><a href="assets/img/portfolio/01,jpg" class="popup-gallery2" title="lightbox view">perspiciatis unde omnis</a></h4> <p><a href="#">category 1</a>. <a href="#">category 3</a> </p> </div> </div> <div class="portfolio-item"> <div class="thumb"> <img src="assets/img/portfolio/02.jpg" alt=""> <div class="portfolio-hover"> <div class="action-btn"> <a href="assets/img/portfolio/02.jpg" class="popup-gallery" title="lightbox view"> <i class="icon-basic_magnifier"></i> </a> </div> </div> </div> <div class="portfolio-title"> <h4><a href="assets/img/portfolio/02,jpg" class="popup-gallery2" title="lightbox view">denouncing pleasure</a></h4> <p><a href="#">category 1</a>. <a href="#">category 3</a> </p> </div> </div> <div class="portfolio-item"> <div class="thumb"> <img src="assets/img/portfolio/03.jpg" alt=""> <div class="portfolio-hover"> <div class="action-btn"> <a href="assets/img/portfolio/03.jpg" class="popup-gallery" title="lightbox view"> <i class="icon-basic_magnifier"></i> </a> </div> </div> </div> <div class="portfolio-title"> <h4><a href="assets/img/portfolio/03,jpg" class="popup-gallery2" title="lightbox view">annoyances accepted</a></h4> <p><a href="#">category 1</a>. <a href="#">category 3</a> </p> </div> </div> <div class="portfolio-item"> <div class="thumb"> <img src="assets/img/portfolio/04.jpg" alt=""> <div class="portfolio-hover"> <div class="action-btn"> <a href="assets/img/portfolio/04.jpg" class="popup-gallery" title="lightbox view"> <i class="icon-basic_magnifier"></i> </a> </div> </div> </div> <div class="portfolio-title"> <h4><a href="assets/img/portfolio/04,jpg" class="popup-gallery2" title="lightbox view">annoyances accepted</a></h4> <p><a href="#">category 1</a> , <a href="#">category 3</a> </p> </div> </div> </div> </div> <!--portfolio carousel--> </div> </div> </div> </div>

我已將此添加到循環的默認代碼中。

這里 imageArr 是圖像數組。

 <div class="page-content"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="heading-title-alt text-left "> <h3 class="text-uppercase">portfolio Carousel</h3> <span class="text-uppercase">Lid est laborum dolo rumes fugats untras.</span> </div> <.--portfolio carousel--> <div id="portfolio-carousel" class=" portfolio-with-title col-3 portfolio-gallery"> <div class="portfolio-item" *ngFor="let item of imageArr"> <div class="thumb"> <img src="assets/img/portfolio/01.jpg" alt=""> <div class="portfolio-hover"> <div class="action-btn"> <a href="assets/img/portfolio/01.jpg" class="popup-gallery" title="lightbox view"> <i class="icon-basic_magnifier"></i> </a> </div> </div> </div> <div class="portfolio-title"> <h4><a href="assets/img/portfolio/01,jpg" class="popup-gallery2" title="lightbox view">perspiciatis unde omnis</a></h4> <p><a href="#">category 1</a> , <a href="#">category 3</a> </p> </div> </div> </div> <!--portfolio carousel--> </div> </div> </div> </div>

這里有一個特別注意，當我在開發人員選項元素中使用默認代碼時，有一個 html 樹，當我使用 *ngfor 循環時它會更改它會影響 html 樹。

這是腳本

 $("#portfolio-carousel").owlCarousel({ autoPlay: 3000, //Set AutoPlay to 3 seconds items: 3, itemsDesktop: [1199, 3], itemsDesktopSmall: [979, 3], navigation: true, pagination: false, navigationText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"], loop:true });

Answer 1

我也遇到了類似的問題。
解決方案是應用 ngx-owl-carousel-o（兼容性高於 Angular 6）。
異步數據到輪播的傳輸是通過模板指令執行的。
你可以參考ngx-owl-carousel-o 。
您可以通過stackblitz查看實時示例。

Answer 2

我有同樣的錯誤現在它工作 1000%

setTimeout(function(){ 
$('.blog-slides').owlCarousel({
    loop: true,
    nav: true,
    dots: true,
    autoplayHoverPause: true,
    autoplay: true,
    margin: 30,
    navText: [
        "<i class='bx bx-chevron-left'></i>",
        "<i class='bx bx-chevron-right'></i>"
    ],
    responsive: {
        0: {
            items: 1,
        },
        576: {
            items: 1,
        },
        768: {
            items: 2,
        },
        992: {
            items: 3,
        }
    }
});

}, 2000);