使用 ngfor 和 ngif 创建网格

Question

我正在尝试制作一个网格，其中一行显示 3 张卡片，然后添加新行，并显示接下来的 3 张卡片。

这是我目前的代码：

<div class="container">
  <div *ngIf="recipes$ | async as recipes; else loadingOrError">
    <div class="row">
      <div class="col" *ngFor="let recipe of recipes; let i = index">
        <app-recipe [recipe]="recipe"></app-recipe>
        <div *ngIf="i % 3 === 0">
          <div class="row"></div>
        </div>
      </div>
    </div>
    <ng-template #loadingOrError></ng-template>
  </div>
</div>

这不起作用。有没有更简单的方法来完成这个任务？我正在使用 mdbootstrap 框架。

Answer 1

我知道您正在使用 mdbootstrap，但这是 CSS 网格的理想方案。如果您无法让 mdbootstrap 为您工作，请考虑以下替代方案：

您的模板：

<div class="container" *ngIf="recipes$ | async as recipes; else loadingOrError">
  <div class="card" *ngFor="let recipe of recipes; let i = index">
    <app-recipe [recipe]="recipe"></app-recipe>
    <div *ngIf="i % 3 === 0">
      <div class="row"></div>
    </div>
  </div>  
</div>
<ng-template #loadingOrError></ng-template>

你的CSS：

.container {
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 1fr 1fr;
}

如果您想要一个交互式示例，请查看此 codepen。硬编码的 div 元素正在模拟由 *ngFor 指令生成的元素。

使用 ngfor 和 ngif 创建网格

Make a grid using ngfor and ngif

angular

mdbootstrap