在轮播中添加新项目会在Angular4中添加新行

Question

我正在Angular4应用程序中工作，在此我有一个旋转木马，我正在显示产品以及产品名称和价格。当前我有6个产品（3 + 3）。如果我单击左侧的旋转木马，我有2个按钮将显示3个产品从左侧的右按钮将显示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中，没有按钮可以添加新产品。 您是手动添加新产品，还是解决方案中缺少代码。

如果手动添加，则可能是将其添加为新行而不是另一列。 由于您使用的是引导程序布局，因此您的代码将屏幕区域分为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() );

}