Angular 2 ngFor 行和列创建了一大列答案

【问题标题】：Angular 2 ngFor row and columns created one big ColAngular 2 ngFor 行和列创建了一大列
【发布时间】：2017-06-20 09:36:39
【问题描述】：

显然，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

【问题讨论】：

这可能很有用stackoverflow.com/questions/21644493/…

标签： javascript angular typescript ngfor

【解决方案1】：

替换为下面的 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

【讨论】：

@NewKey 我的回答有帮助吗？
它对我有帮助，但出现了一个小问题puu.sh/tOzbF.png 和你发布的完全一样，我尝试使用 css 用 column-count 和其他方法阻止它，但没有任何反应

【解决方案2】：

改成下面的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>

【讨论】：