owl-carousel无法使用*ngfor-angle中的html模板循环

Question

我有一个html 5模板，我正在将它与angular 9一起应用，该模板使用owl carousel，它可以很好地处理静态数据。我想将动态数组与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树，当我使用*ngfo循环它影响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

我有同样的错误，现在它工作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(；

Answer 2

我也面临类似的问题
解决方案是应用ngx-owl-carousel-o(Angular 6以上的兼容性(
异步数据到转盘的传输是通过template指令执行的
你可以参考ngx-owl-carouse-o
您可以通过stackblitz查看实际示例。