我正在循环处理一组模型,并希望为每个模型显示一个元素。但是,出于 CSS 原因,我必须在到达第四个模型时添加另一个元素(我需要添加一个 Bootstrap clearfix
元素以使布局看起来不错)。
<div class="jumbotron">
<ol class="row">
<li *ngFor="#card of deck; #i = index" class="col-xs-3">
<h3>{{ card.name }}</h3>
</li>
</ol>
</div>
我怎么说如果 (i + 1) % 4 === 0
, 然后添加这个 li
加上另一个 <li class="clearfix"></li>
?
最佳答案
这可以通过 <ng-container>
来完成辅助元素
<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>
另一种方法(在 <ng-container>
可用之前使用)
这可以用长 ngFor
来完成带有显式 <template>
的形式标记为
<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>
另见 https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html
关于twitter-bootstrap - 为单个 `ngFor` 迭代创建两个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36376006/