【问题标题】：Angular - Display *ngFor in Row and ColumnAngular - 在行和列中显示 *ngFor
【发布时间】：2022-10-05 09:26:21
【问题描述】：

我正在学习使用 Angular，但我对如何在列中显示数据有疑问。

在我的 app.components.ts 我有：

<div class="cardComp" *ngFor="let person of people">
  <app-card-person [person]="person"></app-card-person>
</div>

// people is an array of objects

在我的 card-person.component.ts

<div class="card" style="width: 18rem;">
    <!-- <img src="..." class="card-img-top" alt="..."> -->
    <div class="card-body">
        <h5 class="card-title">{{person?.name}} {{person?.surname}}</h5>
        <p class="card-text">{{person?.description}}</p>
        <!-- <a href="#" class="btn btn-primary">Go somewhere</a> -->
    </div>
</div>

通过这种方式，我获得了一张卡片列表，但它们每行一张：

CARD1
CARD2
CARD3
.....

我想要得到的是：

CARD1                        CARD2
CARD3                        CARD4
.....                        .....

【问题讨论】：

您应该说明您是否使用CSS Framework 来帮助社区为您的问题提供最佳答案。

标签： css angular ngfor

【解决方案1】：

解决方案 1：使用 flexbox

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 50%;
}

<div class="container">
  <div class="cardComp item" *ngFor="let person of people">
    <app-card-person [person]="person"></app-card-person>
  </div>
</div>

结果

Sample Solution 1 on StackBlitz

推荐阅读此Flexbox article。

解决方案 2：使用 Bootstrap

先决条件：导入 Bootstrap CSS 文件。
<div class="row">
  <div class="cardComp col-6" *ngFor="let person of people">
    <app-card-person [person]="person"></app-card-person>
  </div>
</div>
结果

Sample Solution 2 on StackBlitz

【讨论】：

【解决方案2】：

CSS 网格

在你的 app.component.scss

.cardComp {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px; // gap between columns
}

【讨论】：