在 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 中申请循环

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;

 }