已解決430363個問題，去搜搜看，總會有你想問的

如何在 Angular 中循環使用不同的行（引導行）？

首頁猿問如何在 Angular...

如何在 Angular 中循環使用不同的行（引導行）？

JavaScript

炎炎設計 2022-09-29 16:29:36

我問自己：你會如何使用 *ngFor 遍歷不同的行？假設給定了一個數組let arr = [1,2,3,4] // arr can have a arbitrary number of elements現在，我想循環遍歷該數組并顯示值。我希望兩個元素排成一行（使用引導 4.0）。我的方法：<div class="row"> <div class="col-6" *ngFor="let el of arr"> {{el}} </div></div>現在我會有這個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>因為對于一行中的元素，這是正確的。我怎樣才能做到這一點？

查看完整描述

3 回答

蝴蝶刀刀

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

只要 col-6 是固定的，則無需第二個循環即可實現它。

<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>

這將按照您的預期進行。

反對回復 2022-09-29

翻過高山走不出你

TA貢獻1875條經驗獲得超3個贊

備選案文1

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

</div>

</div>

備選案文2

將數組拆分為數組塊并循環訪問它們。

控制器

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>

反對回復 2022-09-29

PIPIONE

TA貢獻1829條經驗獲得超9個贊

從模式來看，它看起來像一個外部循環，一個內部循環將解決問題。外循環將控制“行” - div內部循環將控制“col-6” - div 請試一試。

反對回復 2022-09-29

3 回答
0 關注
185 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何在 Angular 中循環使用不同的行（引導行）？

如何在 Angular 中循環使用不同的行（引導行）？

3 回答

添加回答

如何在 Angular 中循環使用不同的行（引導行）？