为单个 `ngFor` 迭代创建两个元素？

Question

我正在循环处理一组模型，并希望为每个模型显示一个元素。但是，由于 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>？

Answer 1

这可以通过 <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> 可用之前使用）

这可以通过带有显式 <template> 标签的长 ngFor 形式来完成，例如

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

Plunker example

另见 https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

为单个 `ngFor` 迭代创建两个元素？

Create two elements for a single `ngFor` iteration?

twitter-bootstrap

angular2-template

angular