Angular 2 ngFor 行和列创建了一个大列

Question

显然 ngfor 将 div 一个一个地划分，当它完成将所有 div 一个接一个地放置时，呈现出糟糕的设计，我想得到这样的东西：

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

结果我得到了：

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

我的JSON是这样的：

[
  {
    "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"
  }
]

主要问题：

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

此 Plunker 中的更多信息：

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

Answer 1

如下更改 html，现在可以使用了

<div class="app flex-row align-items-center">   
    <div class="container"> 
        <div class="card-deck row">
            <div class="card col-md-4" *ngFor="let data of Const">
                <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>

Answer 2

替换为下面的HTML

<div class="app flex-row align-items-center">   
    <div class="container"> 
        <div class="card-deck row">
            <div class="card col-md-6" *ngFor="let data of Const">
                <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>

屏幕截图 Updated Plunk

Angular 2 ngFor 行和列创建了一个大列

Angular 2 ngFor row and columns created one big Col

javascript

typescript

ngfor

angular