Angular 2 ngFor row and columns created one big Col

Ask Time：2017-02-03T12:57:27 Author：NewKey

Apparently ngfor generates divisions of the divs one by one, and when it finishes placing all the divs one down the other, presenting a bad design, I want to get something like this:

[1] [2] [3]
[4] [5] [6]

And only as a result I have:

[ 1 ]
[ 2 ]
[ 3 ]
  and continues..

My JSON is something like this:

[
  {
    "id_nivel": "1",
    "nombre": "A",
    "constelacion": "AA",
    "descripcion": "AAAAAAAAAAAAAAAAAAAAA"
  },
  {
    "id_nivel": "2",
    "nombre": "B",
    "constelacion": "BB",
    "descripcion": "BBBBBBBBBBBBBBBBBBBBB"
  },
  {
    "id_nivel": "3",
    "nombre": "C",
    "constelacion": "CC",
    "descripcion": "CCCCCCCCCCCCCCCCCCCCC"
  },
  {
    "id_nivel": "4",
    "nombre": "D",
    "constelacion": "DD",
    "descripcion": "DDDDDDDDDDDDDDDDDDDDD"
  },
  {
    "id_nivel": "5",
    "nombre": "E",
    "constelacion": "EE",
    "descripcion": "EEEEEEEEEEEEEEEEEEEEE"
  },
  {
    "id_nivel": "6",
    "nombre": "F",
    "constelacion": "FF",
    "descripcion": "FFFFFFFFFFFFFFFFFFFF"
  }
]

The main problem:

<div class="app flex-row align-items-center">   
<div class="container">
        <div *ngFor="let data of Const" class="row"> 
            <div class="card-deck">
                <div class="card col-md-4">
                    <div class="card-block">
                        <h4 class="card-title">Level {{data.id_nivel}} - {{data.nombre}} </h4>
                        <p class="card-text"> {{data.descripcion}}</p>
                    </div>
                </div>
        </div>
    </div>
</div>

More info in this Plunker:

https://plnkr.co/edit/e5K5oiKL2n9IdHM5qk1v?p=preview

Author:NewKey，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/42017057/angular-2-ngfor-row-and-columns-created-one-big-col

Aravind :

Replace with the below HTML \n\n<div class=\"app flex-row align-items-center\"> \n <div class=\"container\"> \n <div class=\"card-deck row\">\n <div class=\"card col-md-6\" *ngFor=\"let data of Const\">\n <div class=\"card-block\">\n <h4 class=\"card-title\">Level {{data.id_nivel}} - {{data.nombre}} </h4>\n <p class=\"card-text\"> {{data.descripcion}}</p>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\nScreen shot\n\nUpdated Plunk",

2017-02-03T05:14:28

Angular 2 ngFor row and columns created one big Col