时间戳

首页 > 解决方案 > 使用 ngfor 和 ngif 制作网格

angular - 使用 ngfor 和 ngif 制作网格

问题描述

我正在尝试制作一个网格，其中 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框架。

标签： angularmdbootstrap

解决方案

我知道您正在使用 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指令生成的元素。

推荐阅读