bootsrap轮播不适用于angular 7

Question

我正在使用引导多轮播，当我不使用循环时，它工作正常。但是我正在尝试使用ngFor循环使其动态化。它无法正常工作。它与单个图像一起滑动................................................. ................................................... ..........................

<div class="row">
                    <div class="col-xs-12 col-md-12 col-centered">
                        <div id="carousel" class="carousel slide" data-ride="carousel" data-type="multi"
                            data-interval="2500">
                            <div class="carousel-inner">
                                <div class="item" [class.active]="_index == '0'" *ngFor="let item of homedata.data.home_page_1.product_section.data;let _index = index">
                                    <div class="carousel-col">
                                        <div class="single-elomous-product ">
                                            <!-- Product Image Start -->
                                            <div class="pro-img">
                                                <a href="#">
                                                    <img class="primary-img" src="assets/img/products/p1.jpg"
                                                        alt="single-product">
                                                    <img class="secondary-img" src="assets/img/products/p2.jpg"
                                                        alt="single-product">
                                                </a>
                                                <!-- <div class="pro-actions-link">
                                                <a href="#" title="Compare"><span class="icon icon-MusicMixer"></span></a>
                                                <a href="#" title="Wishlist"><span class="icon icon-Heart"></span></a>
                                                <a href="#" data-toggle="modal" data-target="#myModal" title="Quick View"><span class="icon icon-Eye"></span></a>
                                                </div> -->
                                            </div>
                                            <!-- Product Image End -->
                                            <!-- Product Content Start -->
                                            <div class="pro-content">
                                                <div class="pro-info">
                                                    <!-- <div class="product-rating">
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star"></i>
                                                    <i class="fa fa-star-o"></i>
                                                    </div> -->
                                                    <h4>TATA BUZZ</h4>
                                                    <p class="ptest">All Perfect !! I have three sites with magento ,
                                                        this theme is the best !! Excellent support , advice theme
                                                        installation package , sorry for English, are Italian but I had
                                                        no problem !! Thank you !..</p>
                                                </div>
                                                <!-- <div class="pro-add-cart">
                                                    <a href="cart.html" title="Add to Cart">Add To Cart</a>
                                                </div> -->
                                            </div>
                                            <!-- Product Content End -->
                                            <!-- <span class="sticker-sale">-5%</span> -->
                                        </div>
                                    </div>
                                </div>                                
                            </div>

                            <!-- Controls -->
                            <div class="left carousel-control">
                                <a href="#carousel" role="button" data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left text-primary"
                                        aria-hidden="true"></span>
                                    <span class="sr-only" aria-hidden="true">Previous</span>
                                </a>
                            </div>
                            <div class="right carousel-control">
                                <a href="#carousel" role="button" data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right text-primary"
                                        aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                            </div>
                        </div>

                    </div>
                </div>

Answer 1

我的问题已解决。实际上，我们应该使用Slick Carousel而不是bootsrap carousel。  usefull link