Angular*ngFor引导程序中的循环5个网格列不正确

Question

我正在使用Angular 13和Bootstrap 5，并尝试在网格上获得2列的循环。

数据是一个数组：

items = [1, 2, 3 ,4];

然后我有这个：

<div class="container" *ngFor="let item of items">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
Heading here
</div>
<div class="card-body">
Body here
</div>
</div>
</div>
</div>
</div>

出于某种原因，我只在1列而不是2列中获得4张牌。。。所以它在一列中给我4个项目，我需要2行，每行2个项目。

我该怎么做？

Answer 1

您在容器上循环，将ngFor移动到您的col-md-6:

<div class="container">
<div class="row">
<div class="col-md-6" *ngFor="let item of items">
<div class="card">
<div class="card-header">
Heading here
</div>
<div class="card-body">
Body here
</div>
</div>
</div>
</div>
</div>