javascript - 使用angular2和bootstrap将数组数据显示为3列(Display array data to 3 column using angular2 & bootstrap)

Question

In my angular2 component I have listed data and I want to display those data into 3 column by using booststrap class(col-md-4).

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

For example, I have json object like below.

(例如，我有如下的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"}
]

}

(})

And I want to display the name into 3 column.

(我想将名称显示为3列。)

Noodles Salad Soup Fresh Bowl Snacks Sandwich

(面条沙拉汤新鲜碗快餐三明治)

Here is my code that I tried.

(这是我尝试过的代码。)

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

But it display error, because first of all I cannot use ngFor & ngIf in a same element.

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

Please give me a solution.

(请给我一个解决方案。)

  ask by Mahfuja nilufar translate from so

Answer 1

To display items in rows you do not need to actually separate the rows, because 'col-md-4' will break into rows after 3 columns (as expected).

(要显示行中的项目，您不需要实际分隔行，因为'col-md-4'将在3列之后分成几行（如预期）。)

The code below will work for your case:

(以下代码适用于您的情况：)

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