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