Javascript 使用angular2&；将阵列数据显示到3列；独自创立

在我的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>

{{menu[$i].name}
{{menu[$i+1].name}
{{menu[$i+2].name}

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

---

请给我一个解决办法

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

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

{{menu.name}

3x md-4等于一整行。只要输出一个{{menu.name}就可以了