javascript - 在轮播中添加新元素会在 Angular4 中添加新行

Question

我在 Angular4 应用程序中工作，在这个应用程序中我有一个旋转木马，我显示了产品和产品名称和价格。目前我有 6 种产品(3 + 3)。如果我点击左侧旋转木马，我有 2 个按钮show 3 products from left side for right button 将显示右侧的 3 个产品。

问题是当我添加一个新产品轮播时生成一个新行而不是在产品行中显示。

如何解决是。

HTML

 <section class="carousel slide"  id="myCarousel">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-right mb-4">
                        <a class="btn btn-outline-secondary carousel-control left"  href="#myCarousel" data-slide="prev" title="go back"><i class="fa fa-lg fa-chevron-left"></i></a>
                        <a class="btn btn-outline-secondary carousel-control right" href="#myCarousel" data-slide="next"  title="more"><i class="fa fa-lg fa-chevron-right"></i></a>
                    </div>      
                </div>   
            </div>

            <div class="container p-t-0 m-t-2 carousel-inner">
                <div class="row row-equal carousel-item active m-t-0">
                    <div class="col-sm-4">
                        <div class="card">
                            <div class="card-img-top card-img-top-250 one">
                                <img routerLink="/my-cart"  class="img-fluid" src="assets/Images/Popular_Products/iPhone1.jpg" alt="Carousel 1">
                                <img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" src="assets/Images/Popular_Products/iPhone2.jpg" alt="Carousel 1">
                            </div>
                            <div class="card-block pt-2">
                                <div class="col-sm-12 text-center card-text">
                                   <span #Pname1>iPhone</span>
                                    <br>
                                    <br>
                                    3433 $
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="col-sm-4">
                        <div class="card">
                            <div class="card-img-top card-img-top-250 one">
                                <img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/indianSpices1.jpg" alt="Carousel 1">
                                <img routerLink="/my-cart" (click)="getProductName(Pname)" class="img-fluid two" src="assets/Images/Popular_Products/indianSpices2.jpg" alt="Carousel 1">
                            </div>
                             <div class="card-block pt-2">
                                <div class="col-sm-12 text-center card-text">
                                   <span #Pname>Indian Spices</span>
                                    <br>
                                    <br>
                                    747 $
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="col-sm-4">
                        <div class="card">
                            <div class="card-img-top card-img-top-250 one">
                                <img  class="img-fluid" src="assets/Images/Popular_Products/6.jpg" alt="Carousel 1">
                                <img routerLink="/my-cart"  class="img-fluid two" src="assets/Images/Popular_Products/10.jpg" alt="Carousel 1">
                            </div>
                            <div class="card-block pt-2">
                                <div class="col-sm-12 text-center card-text">
                                   <span>Home Appliances</span>
                                    <br>
                                    <br>
                                    <span >4500 $</span>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>
                <div class="row row-equal carousel-item m-t-0">
                    <div class="col-sm-4">
                        <div class="card">
                            <div class="card-img-top card-img-top-250 one">
                                <img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/8.jpg" alt="Carousel 1">
                                <img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/9.jpg" alt="Carousel 1">
                            </div>
                            <div class="card-block pt-2">
                                <div class="col-sm-12 text-center card-text">
                                    Bicycles
                                    <br>
                                    <br>
                                    2329 $
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="col-sm-4">
                        <div class="card">
                            <div class="card-img-top card-img-top-250 one">
                                <img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/5.jpg" alt="Carousel 1">
                                <img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/12.jpg" alt="Carousel 1">
                            </div>
                            <div class="card-block pt-2">
                                <div class="col-sm-12 text-center card-text">
                                    Electronic Items
                                    <br>
                                    <br>
                                    8333 $
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-4">
                        <div class="card">
                            <div class="card-img-top card-img-top-250 one">
                                <img routerLink="/my-cart" class="img-fluid" src="assets/Images/Popular_Products/2.jpg" alt="Carousel 1">
                                <img routerLink="/my-cart" class="img-fluid two" src="assets/Images/Popular_Products/7.jpg" alt="Carousel 1">
                            </div>
                            <div class="card-block pt-2">
                                <div class="col-sm-12 text-center card-text">
                                    Natural Oils
                                    <br>
                                    <br>
                                    5435 $
                                </div>
                            </div>

                    </div>

                </div>
            </div>
            </div>
        </section>

Answer 1

在 stackblitz 中，没有添加新产品的按钮。您是手动添加新产品，还是解决方案中缺少代码。

如果手动添加，您可能将其添加为新行而不是另一列。由于您使用的是 Bootstrap 布局，因此您的代码将屏幕区域分为 12 个部分，每个图像使用 4 个部分(分别为 sm-12、sm-4)。现在，当您添加另一个产品时，会创建一个新行，因为当前行中没有剩余空间。

要解决此问题，不要逐个分配，而是为每个产品卡片指定固定大小，然后让整体水平滚动。

或者，创建另一个 sm-12 行(第 3 轮)并向其中添加元素。您将需要创建一个托管 3 个产品的组件，并且每个左/右按钮将在主轮播中循环。添加的任何产品都将放入空组件中，一旦填充，将创建另一个实例来托管该产品。

--- 下面的伪代码，用实际值自定义----

@Component( {} }
export class ProductsContainerComponent {
    products: Product[]

// template shows 3 products
}

@Component()
export class ProductCarousalComponent {
     carousal: ProductsContainerComponent[]

     btnPrevious, btnNext: Button => Each set the current pointer to a given container in list, which gets displayed

     addNewProduct() {
ProductsContainerComponent container;
carousal.each(prod => if (prod.products.length < 3) { container = prod; break; } );
if (container == null)
   {  container = new ProductsContainerComponent();  carousal.push (container); }

// construct your new product here (url, images, text etc)
container.products.push (new Product() );

}