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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何在 Angular 中循環(huán)使用不同的行（引導(dǎo)行）？

如何在 Angular 中循環(huán)使用不同的行（引導(dǎo)行）？

炎炎設(shè)計(jì) 2022-09-29 16:29:36
我問自己：你會(huì)如何使用 *ngFor 遍歷不同的行？假設(shè)給定了一個(gè)數(shù)組let arr = [1,2,3,4] // arr can have a arbitrary number of elements現(xiàn)在，我想循環(huán)遍歷該數(shù)組并顯示值。我希望兩個(gè)元素排成一行（使用引導(dǎo) 4.0）。我的方法：<div class="row">    <div class="col-6" *ngFor="let el of arr"> {{el}} </div></div>現(xiàn)在我會(huì)有這個(gè)html代碼<div class="row">    <div class="col-6"> 1 </div>    <div class="col-6"> 2 </div>    <div class="col-6"> 3 </div>    <div class="col-6"> 4 </div></div>但我想要這樣：<div class="row">    <div class="col-6"> 1 </div>    <div class="col-6"> 2 </div></div><div class="row">    <div class="col-6"> 3 </div>    <div class="col-6"> 4 </div></div>因?yàn)閷?duì)于一行中的元素，這是正確的。我怎樣才能做到這一點(diǎn)？
查看完整描述

3 回答

?
蝴蝶刀刀

TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超8個(gè)贊

只要 col-6 是固定的，則無需第二個(gè)循環(huán)即可實(shí)現(xiàn)它。

<div>
  <ng-container  *ngFor="let el of arr; index as i">
    <div class="row" *ngIf="i%2 === 0">
            <div class="col-6" > {{arr[i]}} </div>
            <div class="col-6" > {{arr[i+1]}} </div>
    </div>
  </ng-container></div>

這將按照您的預(yù)期進(jìn)行。


查看完整回答
反對(duì) 回復(fù) 2022-09-29
?
翻過高山走不出你

TA貢獻(xiàn)1875條經(jīng)驗(yàn) 獲得超3個(gè)贊

備選案文1

最快的選擇是使用切片管。但它可能不適合大型數(shù)據(jù)集。


<div class="row">

  <div class="col-6" *ngFor="let el of arr | slice:0:2"> {{el}} </div>

</div>

<div class="row">

  <div class="col-6" *ngFor="let el of arr | slice:2:4"> {{el}} </div>

</div>

備選案文2

將數(shù)組拆分為數(shù)組塊并循環(huán)訪問它們。


控制器


export class AppComponent  {

  arr = [1,2,3,4];

  finalArr = [];    // <-- [[1,2], [3,4]]


  constructor(private http: HttpClient){

    for (let i = 0, j = this.arr.length; i < j; i += 2) {

      this.finalArr.push(this.arr.slice(i, i + 2));

    }

  }

}

模板


<div class="row" *ngFor="let arr of finalArr">

  <div class="col-6" *ngFor="let el of arr"> {{el}} </div>

</div>


查看完整回答
反對(duì) 回復(fù) 2022-09-29
?
PIPIONE

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊

從模式來看，它看起來像一個(gè)外部循環(huán)，一個(gè)內(nèi)部循環(huán)將解決問題。外循環(huán)將控制“行” - div內(nèi)部循環(huán)將控制“col-6” - div 請(qǐng)?jiān)囈辉嚒?/p>


查看完整回答
反對(duì) 回復(fù) 2022-09-29
  • 3 回答
  • 0 關(guān)注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)