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

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>