为单个 `ngFor` 迭代创建两个元素? [英] Create two elements for a single `ngFor` iteration?
问题描述
我正在循环访问一组模型,并希望为每个模型显示一个元素.但是,由于 CSS 原因,当我到达第四个模型时,我必须添加另一个元素(我需要添加一个 Bootstrap clearfix
元素以使布局看起来不错).
<ol class="row"><li *ngFor="#card of Deck; #i = index" class="col-xs-3"><h3>{{ card.name }}</h3></ol>
如果(i + 1) % 4 === 0
,然后加上这个li
加上另一个<li class="clearfix"></li>
?
这可以通过
辅助元素
<ol class="row"><ng-container *ngFor="让一副牌" let-i="index"><h3>{{ card.name }}</h3> <li *ngIf="(i + 1) % 4 === 0" class="clearfix"></li></ng-容器></ol>
<小时>
另一种方法(在
可用之前使用)
这可以通过带有显式 标签的长
ngFor
表单来完成,例如
<ol class="row"><模板 ngFor let-card [ngForOf]="deck" let-i="index"><h3>{{ card.name }}</h3> <li *ngIf="(i + 1) % 4 === 0" class="clearfix"></li>模板></ol>
另见 https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html
I am looping on a collection of models and want to show one element per model. However, for CSS reasons, I must add another element when I reach the forth model (I need to add a Bootstrap clearfix
element for the layout to look good).
<div class="jumbotron">
<ol class="row">
<li *ngFor="#card of deck; #i = index" class="col-xs-3">
<h3>{{ card.name }}</h3>
</li>
</ol>
</div>
How do I say if (i + 1) % 4 === 0
, then add this li
plus another <li class="clearfix"></li>
?
This can be done with the <ng-container>
helper element
<div class="jumbotron">
<ol class="row">
<ng-container *ngFor="let card of deck" let-i="index">
<li class="col-xs-3">
<h3>{{ card.name }}</h3>
</li>
<li *ngIf="(i + 1) % 4 === 0" class="clearfix"></li>
</ng-container>
</ol>
</div>
An alternative approach (used before <ng-container>
became available)
This can be done with the long ngFor
form with an explicit <template>
tag like
<div class="jumbotron">
<ol class="row">
<template ngFor let-card [ngForOf]="deck" let-i="index">
<li class="col-xs-3">
<h3>{{ card.name }}</h3>
</li>
<li *ngIf="(i + 1) % 4 === 0" class="clearfix"></li>
</template>
</ol>
</div>
See also https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html
这篇关于为单个 `ngFor` 迭代创建两个元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!