Angular2 + Bootstrap网格

Question

在Angular2中,我有一个对象列表,我正在尝试使用bootstrap的网格布局系统,但是在Angular2中找出如何做到这一点时遇到一些困难.任何帮助,将不胜感激!

如果我使用HandlebarsJS,我可以使用以下代码完成此操作:

{{#for elements}}
    {{#if index % 12 === 0}}
          <div class="row">
    {{/if}}
    <div class="col-md-2">
          {{element.name}}
    </div>
    {{#if index % 12 === 0}}
          </div>
    {{/if}}
{{/for}}

所以我希望它看起来像:

<div class="row">
    <div class="col-md-2">
        Bob
    </div>
    <div class="col-md-2">
        Joe
    </div>
    ...
</div>
<div class="row">
    <div class="col-md-2">
        Julie
    </div>
    <div class="col-md-2">
        Cheryl
    </div>
    ...
</div>

Answer 1

这是旧辩论的重演,但是对于Angular的新版本.Angular 1.x中针对此问题的一些更受欢迎/创造性的解决方案可以在此处找到,并且可以根据您的目的进行更新.就个人而言,我赞成Duncan的解决方案,但我认为这是一个意见问题.Angular2代码的更新版本,下面是一个简单的Codepen:

  <div class="row">
    <div *ngFor="let hero of heroes; let i = index">
      <div class="clearfix" *ngIf="i % 3 == 0"></div>
      <div class="col-md-4">{{hero.name}}</div>
    </div>
  </div>

工作Codepen

Codepen注意:蓝色背景颜色是row.红色是col-md-*细胞.

如您所见,此代码仅使用一个row包装所有col-*元素的元素,并在clearfix每个x元素中插入一个元素.IMO,这个解决方案是比较干净的,似乎使用更多的谷歌材料设计精简版(MDL)风格的网格为行和单元格比引导标准行/列执行落实.

当然,这些答案都没有为您提供您所要求的确切内容,但它有点像苹果到橙子.