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