Question

在Angular4项目中工作，我使用轮播来显示产品，产品从API响应中绑定。

在我的旋转木马中，我展示了单行3列格式的产品，如果API返回10个产品，则第10个产品将显示单个幻灯片。

我想将第10个产品与第1和第2个产品合并，然后显示为3列幻灯片。

Html

<div class="col-sm-9">
                <section class="container">
                    <div class="row">
                        <div class="col-sm-1">
                            <i class="fa fa-user" style="font-size:25px"></i>
                        </div>
                        <div class="col-sm-9">
                            <h5>Popular Products</h5>
                        </div>
                    </div>
                </section>
                <hr>
                <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 {{ i == 0 ? 'active' : '' }} m-t-0" *ngFor="let chunkProducts of productData;let i =index;">
                            <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" 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>
                    </div>
                </section>

这是我的html文件，将幻灯片显示为3列格式。

组件

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

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

Answer 1

只需改变：

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

    let last = this.productData[this.productData.length-1].length;
    if(this.productData.length > 1 && last < 3) {
        this.productData[this.productData.length-1] = [ ...this.productData[this.productData.length-1] , ...this.productData[0].slice(0, 3-last) ];
    }

});

<强> WORKING DEMO

轮播滑块在Angular4中显示单个项目

1 个答案: