在轮播中添加产品会在Angular4中生成新行 [英] Adding products in carousel generates new row in Angular4

问题描述

在Angular4应用程序中工作，在此我有一个显示了热门​​产品的轮播.在我的情况下，在默认视图中，当我单击向左或向右按​​钮时，我已经显示了3个产品，它将显示另外3个产品. 目前我有6个产品(3 + 3)都是静态值.

Working in an Angular4 application,In this I have a carousel were I have shown the popular products .In my case in the default view I have displayed 3 products when I clicked on left or right button it will display another 3 products . currently I have 6 products (3+3) all are static values.

问题:

当我通过静态代码在滑块中添加另一个1个或多个产品时，它会生成新的幻灯片行.

When I add another 1 or more product in slider by static code it generates a new row of slides.

我尝试了一些例子，但对我来说却无济于事.

I have tried some examples nothing is worked for me.

我想做的是，如果我在轮播中添加更多产品，则轮播必须将所有产品显示为普通幻灯片.

What I want to do is If I add more products in carousel,carousel must display all the products as the normal slides .

注意:现在，我提供了静态值，实际上，在我的项目中，我将绑定来自API响应的所有产品，其中包括图像路径，产品名称，价格，隐藏的ID.

Note : Now I have give the static values ,Actually in my project I will bind all the products from API response which will include image path,productname,price,hidden id.

我创建了一个stackblitz文件，在其中保存了所有静态代码.

I have created an stackblitz file there I kept all the static codes.

https://stackblitz.com/edit/angular -mn29mi?file = app％2Fapp.component.html

用于绑定API产品的动态代码.

Dynamic code for binding products from API.

<div class="col-sm-4" *ngFor="let slider of productData; let i = index">
    <div class="card">
       <div class="card-img-top card-img-top-250 one" >
           <img class="img-fluid" [src]="slider['PRODUCT_IMAGE']" alt="Carousel 1">
           <img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" [src]="slider['PRODUCT_IMAGE_ONHOVER']" alt="Carousel 1">
       </div>
           <div class="card-block pt-2">
               <div class="col-sm-12 text-center card-text">
                   <span>{{slider.PRODUCT_NAME}}</span>
                   <br>
                   <input type="hidden" value="{{slider.PRODUCT_ID}}" #Pname1>
                   <br>
                   <span>{{slider.PRODUCT_PRICE}}</span>
               </div>
           </div>
   </div>
</div>

请帮助我从API动态绑定产品，并确保当产品数量增加时，滑块不会生成新行.

Please help me to dynamically bind the products from API and make the slider will not generate new rows when number of product increase.

组件代码:

export class LandingpageComponent {

  product_Name: any;
  productData: any;
  sliderPaths: any;
  sideMenuSliders : any;
  slider_Active_Item: any;
  side_Menu_Active_Item : string;
  slider_Sliding_Item : any;
  side_Menu_Slider_Image : any;

  constructor(private CartdataService: CartdataService, private router: Router,) {
    this.router.events.subscribe(
      () => window.scrollTo(0, 0) );
  }

  chunks(array, size) {
    let results = [];
    results = [];
    while (array.length) {
        results.push(array.splice(0, size));
    }
    return results;
}
  getProductName(Pname: any) {
    this.CartdataService.get_Product(Pname.textContent);
  }

  ngOnInit() {
    this.CartdataService.get_New_Products().subscribe(
      data => {
        this.productData = data
      });
  }
}

推荐答案

在这里，您需要做的就是将数据数组分成3个部分，然后以这种方式循环两次.

Here you go, All you need to do is chunk your data array in to parts of 3 , then loop through it twice this way.

组件侧:

ngOnInit() {
    this.CartdataService.get_New_Products().subscribe(
    data => {
        this.productData = this.chunks(data,3);
    });
}

chunks(array, size) {
    let results = [];
    results = [];
    while (array.length) {
        results.push(array.splice(0, size));
    }
    return results;
}

模板端:

<div class="row row-equal carousel-item m-t-0" *ngFor="let chunkProducts of productData;">
    <div class="col-sm-4" *ngFor="let slider of chunkProducts;">
        <div class="card">
        <div class="card-img-top card-img-top-250 one" >
            <img class="img-fluid" [src]="slider['PRODUCT_IMAGE']" alt="Carousel 1">
            <img routerLink="/my-cart" (click)="getProductName(Pname1)" class="img-fluid two" [src]="slider['PRODUCT_IMAGE_ONHOVER']" alt="Carousel 1">
        </div>
            <div class="card-block pt-2">
                <div class="col-sm-12 text-center card-text">
                    <span>{{slider.PRODUCT_NAME}}</span>
                    <br>
                    <input type="hidden" value="{{slider.PRODUCT_ID}}" #Pname1>
                    <br>
                    <span>{{slider.PRODUCT_PRICE}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

工作演示

WORKING DEMO

这篇关于在轮播中添加产品会在Angular4中生成新行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！