使用angular2＆bootstrap显示阵列数据到3列

Question

在我的angular2组件中，我列出了数据，并且我想通过使用booststrap类（col-md-4）将这些数据显示到3列中。

例如，我有像下面这样的json对象。

{ 
"menuList":[ 
    {"id":1,"sn":"nd","name":"Noodles"}, 
    {"id":2,"sn":"sd","name":"Salad"}, 
    {"id":3,"sn":"sp","name":"Soup"}, 
    {"id":4,"sn":"fb","name":"Fresh Bowl"}, 
    {"id":5,"sn":"sn","name":"Snacks"}, 
    {"id":6,"sn":"pz","name":"Pizza"}, 
    {"id":7,"sd":"nd","name":"Sandwich"} 
] 

}

我想要显示的名字为3列。

面条沙拉汤 新鲜碗小吃三明治

这里是我的代码，我试过了。

<div *ngFor="let menu of menuList; #i=index" *ngIf="i % 3 == 0" class="row"> 
    <div class="col-md-4">{{menu[$i].name}}</div> 
    <div class="col-md-4">{{menu[$i + 1].name}}</div> 
    <div class="col-md-4">{{menu[$i + 2].name}}</div> 

但它显示错误，首先是因为我不能在同一个元素中使用ngFor & ngIf。

请给我一个解决方案。

Answer 1

要显示行中的项目，您不需要实际分隔行，因为'col-md-4'将在3列之后分解成行（如预期的那样）。下面的代码将适用于您的情况：

<div class="row"> 
    <div *ngFor="let menu of menuList" class="col-md-4">  
    {{menu.name}} 
    </div> 
</div>