owl-carousel 不能使用带有 html 模板的 angular 中的 *ngfor 循环

Question

我有 html 5 模板，我将它与使用 owl-carousel 的 angular 9 一起应用，并且它可以正常处理静态数据。我想将动态数组与 owl carousel 一起使用，我正在使用 *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);