第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在 Angular 8 的一張幻燈片中包含多個圖像/卡片的動態(tài)引導程序 4 輪播

在 Angular 8 的一張幻燈片中包含多個圖像/卡片的動態(tài)引導程序 4 輪播

慕運維8079593 2023-04-20 17:04:08
我正在嘗試設計一個在一行中包含多個卡片/圖像的動態(tài)輪播。我首先嘗試在一行中實現(xiàn)多張卡片，但下一個和上一個按鈕不起作用，所以我在網(wǎng)上搜索并找到了解決方案，現(xiàn)在下一個和上一個按鈕工作正常，但我只能在每張幻燈片中看到一個圖像。下面是我的代碼，<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>每行一張卡片這就是我要設計的所需設計誰能告訴我哪里出錯了。任何幫助深表感謝。謝謝你??！
查看完整描述

1 回答

?
www說

TA貢獻1775條經驗 獲得超8個贊

我能夠通過創(chuàng)建嵌套數(shù)組來實現(xiàn)這一點。

  1. 從服務器獲取數(shù)據(jù)

  2. 檢查屏幕尺寸以決定在輪播上顯示多少張圖片

  3. 將數(shù)組中的數(shù)據(jù)和圖像數(shù)量發(fā)送到塊方法

  4. 在 html 中申請循環(huán)

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;

 }


查看完整回答
反對 回復 2023-04-20
  • 1 回答
  • 0 關注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號