Angular 2在偶数/奇数项目中显示/隐藏换行标记 [英] Angular 2 show/hide wrap tag in ngFor over even/odd items
本文介绍了Angular 2在偶数/奇数项目中显示/隐藏换行标记的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有2列列表。是否可以添加数组元素是奇数元素,如果是偶数元素则可以关闭标记。
I have 2 column list. Is it possible to add if array element is odd element and to close tag if it is even element.
<ng-container ngFor="let item of items; let odd=odd;">
<!-- if odd -->
<div class="item-wrapper">
<!-- /if -->
<div class="item">{{item.name}}</div>
<!-- if !odd -->
</div>
<!-- /if -->
</ng-container>
在knockout.js中,我可以这样做:
In knockout.js i can do it like this:
<!-- ko foreach: items -->
<!-- ko if: $i % 2 !== 0 -->
<div class="item-wrapper">
<!-- /ko -->
<div class="item">{{items.name}}</div>
<!-- ko if: $i % 2 === 0 -->
</div>
<!-- /ko-->
<!-- /ko-->
布局的最终结果应为:
Final result of layout should be:
<div class="item-wrapper">
<div class="item">#NAME_1</div>
<div class="item">#NAME_2</div>
</div>
<div class="item-wrapper">
<div class="item">#NAME_3</div>
<div class="item">#NAME_4</div>
</div>
推荐答案
@Pipe({name: 'split'})
export class BundlePipe implements PipeTransform {
transform(val, size) {
if(!size || !val || !val.length) {
return val;
}
var result = [[]];
var row = 0;
for(int i = 0; i < val.length; i++) {
result[row].push(val[i]);
if(i % row === 0) {
row++;
}
}
}
}
<ng-container ngFor="let item of items | split:2; let odd=odd;">
<div class="item-wrapper"></div>
<div *ngFor="let p of item" class="item">{{item.name}}</div>
</div>
</ng-container>
注意 - 未经测试 - 只是为了证明这个想法
Caution - not tested - just to demonstrate the idea
这篇关于Angular 2在偶数/奇数项目中显示/隐藏换行标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文