在 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

我能够通过创建嵌套数组来实现这一点。从服务器获取数据检查屏幕尺寸以决定在轮播上显示多少张图片将数组中的数据和图像数量发送到块方法在 html 中申请循环HTML&nbsp; &nbsp; &nbsp;<div class="carousel-item row&nbsp; w-100&nbsp; mx-3 text-center {{ i == 0 ? 'active' : '' }} m-t-0" style="margin-right: 70px;" *ngFor='let fav of userFavourite; let i = index' >&nbsp; &nbsp; &nbsp; &nbsp;<div&nbsp; class=" d-flex justify-content-around w-100" >&nbsp; &nbsp; &nbsp; &nbsp;<div&nbsp; class="mainSlide " style="align-content: center;" *ngFor="let x of fav;" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ///Enter each image from loop..etc&nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;</div>打字稿/Component.ts&nbsp; &nbsp; //get the image/data from server&nbsp; &nbsp;getUserFavourite() {&nbsp; this._productService.getUserFavourite(this.loggedInUsername).subscribe(&nbsp; (res) => {&nbsp; &nbsp; if( this.scrWidth>1300){&nbsp; &nbsp; &nbsp; this.favCount=4;&nbsp; &nbsp; } else if(this.scrWidth<1300 && this.scrWidth>1025){this.favCount='3';&nbsp; &nbsp; } else if(this.scrWidth<1025&nbsp; ){&nbsp; &nbsp; &nbsp; this.favCount='2';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; else if(this.scrWidth<600 ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.favCount='1';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; this.userFavourite = this.chunks(res,this.favCount);&nbsp; &nbsp; console.log(this.userFavourite);&nbsp; },&nbsp; (err) => {&nbsp; &nbsp; this.error = err;&nbsp; });}&nbsp; /**************************************************************** */&nbsp; //gets the size of window screen to adjust number of images in an array to fit carousel&nbsp; @HostListener('window:resize', ['$event'])getScreenSize(event?) {&nbsp; &nbsp; &nbsp; this.scrHeight = window.innerHeight;&nbsp; &nbsp; &nbsp; this.scrWidth = window.innerWidth;&nbsp; &nbsp; &nbsp; console.log(this.scrHeight, this.scrWidth);}&nbsp;/******************************************************************** */&nbsp; &nbsp;&nbsp;//adds images from server to arraychunks(array, size) {let results = [];results = [];while (array.length) {results.push(array.splice(0, size));}return results;&nbsp;}