Angular 8 中一张幻灯片中包含多个图像/卡片的动态引导程序 4 轮播

Question

我正在尝试设计一个动态轮播，在一行中有多个卡片/图像。 我首先尝试在一行中实现多张卡片，但下一个和上一个按钮不起作用，所以我在网上搜索并找到了一个解决方案，现在下一个和上一个按钮工作正常，但我只能在每张幻灯片中看到一个图像。 下面是我的代码，

<div id="myCarousel" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item" *ngFor="let data of dummyData;let i = index"
                        [ngClass]="{'active' : i == 0}">
                        <div class="row">
                            <div class="col">
                                <div class="main-card">
                                    <span class="mt-4">
                                        {{data.class}} <br>
                                        {{data.when}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>

每行一张卡

这就是我想要设计的

所需设计

谁能告诉我我哪里出错了。 任何帮助深表感谢。

谢谢！！

Answer 1

我能够通过创建嵌套数组来实现这一点。

1. 从服务器获取数据
2. 检查屏幕大小以决定在轮播上显示多少图像
3. 将数组中的数据和图像数量发送到块方法
4. 在html中应用apply for循环

HTML

      <div class="carousel-item row  w-100  mx-3 text-center {{ i == 0 ? 'active' : '' }} m-t-0" style="margin-right: 70px;" *ngFor='let fav of userFavourite; let i = index' >
       <div  class=" d-flex justify-content-around w-100" >
       <div  class="mainSlide " style="align-content: center;" *ngFor="let x of fav;" >

          ///Enter each image from loop..etc

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

打字稿/Component.ts

    //get the image/data from server
   getUserFavourite() {
  this._productService.getUserFavourite(this.loggedInUsername).subscribe(
  (res) => {
    if( this.scrWidth>1300){
      this.favCount=4;
    } else if(this.scrWidth<1300 && this.scrWidth>1025){
this.favCount='3';
    } else if(this.scrWidth<1025  ){
      this.favCount='2';
          }
          else if(this.scrWidth<600 ){
            this.favCount='1';
                }
    this.userFavourite = this.chunks(res,this.favCount);
    console.log(this.userFavourite);
  },
  (err) => {
    this.error = err;
  }
);
}

  /**************************************************************** */
  //gets the size of window screen to adjust number of images in an array to fit carousel
  @HostListener('window:resize', ['$event'])
getScreenSize(event?) {
      this.scrHeight = window.innerHeight;
      this.scrWidth = window.innerWidth;
      console.log(this.scrHeight, this.scrWidth);
}
 /******************************************************************** */   

 //adds images from server to array
chunks(array, size) {
let results = [];
results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
 }