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