我正在將圖像寫出到網頁中。每三張圖片我想開始一個新的行。角2是否支持這個?您可以在Angular 2中使用ngFor與模數運算符
1
A
回答
5
您可以通過以下方式實現:
<div *ngFor="let t of temp(math.ceil(arr.length/3)).fill(); let i = index" class="row">
<div *ngFor="let item of arr.slice(3*i,3*i + 3);" class="item">
{{item}}
</div>
</div>
而在你的組件:
export class App {
temp = Array;
math = Math;
arr= [1,2,3,4,5,6,7,8,9,10,11];
}
這裏的工作從兩個答案Plunker
+0
這兩個答案都有效。你可以得到額外的風格。 – Lockless
5
您可以從*ngFor
訪問迭代的指數,像這樣:
*ngFor="let x of container; let i = index;"
之後就可以引用在*ngFor
內的*ngIf
該指數顯示您的新行:
<div *ngIf="i%3 === 0">
0
借款,而是靠在更多Alex的,這裏是我如何完成它ng2
(V2.0.1)。
<template ...
已棄用。你在哪看到<template ...
你應該在v5之後使用<ng-template ...
。
<template ngFor let-peer [ngForOf]="peers" let-p="index" let-last="last">
<div class="row" *ngIf="p % 2 === 0">
<div class="col-xs-8 col-sm-6">
<label><input type="checkbox" ... {{peers[p].name}}</label>
</div>
<div class="col-xs-8 col-sm-6" *ngIf="!last">
<label><input type="checkbox" ... {{peers[p+1].name}}</label>
</div>
</div>
</template>
請注意,雖然我從集合let-peer [ngForOf]="peers"
,我沒有具體使用它。相反,我使用集合和索引let-p="index"
,根據需要添加到索引,例如peers[p]
和peers[p+n]
。
根據需要調整模量。最後一行應檢查以確保第一列到最後一列不是迭代器中的最後一個項目。
相關問題
- 1. 在ngFor-Angular 2中計數
- 2. Angular 2:* ngFor in * ngFor
- 3. Angular 4模塊可以與Angular 2項目配合使用
- 4. Angular 2:在* ngFor中動畫數據?
- 5. 在Angular 2中使用* ngFor與JSON對象
- 6. 在Angular ng中使用OR運算符
- 7. Angular 2 ngSwitch嵌套在ngFor
- 8. Angular 2中的Observable和ngFor
- 9. Angular 2模板在使用ngFor內部div時解析錯誤
- 10. Angular 2閱讀列表與ngFor視圖?
- 11. 如何在Angular 2中測試* ngFor?
- 12. 角2模板引用與* ngFor
- 13. Angular 2.問題與* ngFor,當我使用管道
- 14. Angular 2:align/position items in ngFor
- 15. Angular 2 * ngFor不顯示數據
- 16. Angular 2 - 如何通過* ngFor函數
- 17. Angular 2 ngFor不更新數據
- 18. 「IN」運算符可以在Oracle中使用LIKE通配符(%)嗎?
- 19. 您可以使用佔位符在VIM中創建模板嗎?
- 20. 在C++模板中使用運算符
- 21. 是否可以在Angular 2或Angular 4中使用alpacajs?
- 22. 如何在Angular 2中使用* ngFor在列表中打印json數組值?
- 23. 我可以在運行時加載模塊嗎? Angular 2
- 24. Angular - 在* ngForf中使用* ngFor對錶
- 25. 在Angular 2中的每個ngFor之後計算和存儲數據
- 26. 可以與「+」運算符一起使用的通用類型
- 27. Angular 2:ngFor在下降順序
- 28. Angular 2中多個三元運算符上的禁用按鈕
- 29. 角2 - ngFor與ContentProjection
- 30. 模數運算符在C#
是的,它的確... – raven