样式化 ngfor 生成的 dom 元素

Question

背景：所以我从后端获取了一些数据，这些数据作为数组存储在我的 Angular 前端。现在我试图在模板上显示这些元素（它们是产品）中的每一个。我基本上想要实现的是用户可以浏览的页面上的产品。

问题： 问题是 ngfor 只是在模板的垂直线上一个接一个地绘制元素。我想要的是能够应用一般样式设置（也许在托管 ngfor 的父元素上？），因此元素从页面的左上角到右上角的一行，根据视口从 1 到 X 个元素宽度，然后在以下行上继续，直到原始数组中没有剩余。 PS。我曾尝试在父元素中使用 css 网格和 flexbox，但它们只是被模板忽略了。

如果有人能指出我可以达到预期结果的方向，我将不胜感激。

我的模板代码如下：

<div id="backGroundImage">
  <div id="salesPageContainer">
    <div id="saleItemsContainer" >
      <div *ngFor="let saleItem of saleItems" id="itemContainer" >
        <p id="itemName">{{ saleItem.itemName }}</p>
        <p id="itemPrice">{{ saleItem.itemPrice }}</p>
        <img [src]="imageUrl + saleItem.imageID" alt="" id="itemImage" />
      </div>
    </div>
  </div>
</div>

Answer 1

在此处查看示例实现 WORKING STACKBLITZ

如果您的应用中有 bootstrap，请添加 class="d-flex flex-wrap" like below

<div id="backGroundImage">
  <div id="salesPageContainer">
    <div id="saleItemsContainer" class="d-flex flex-wrap">
      <div *ngFor="let saleItem of saleItems" id="itemContainer" >
        <p id="itemName">{{ saleItem.itemName }}</p>
        <p id="itemPrice">{{ saleItem.itemPrice }}</p>
        <img [src]="imageUrl + saleItem.imageID" alt="" id="itemImage" />
      </div>
    </div>
  </div>
</div>

在 plain css 中应用 css display: flex; flex-wrap: wrap; 到 id="saleItemsContainer"

<div id="backGroundImage">
  <div id="salesPageContainer">
    <div id="saleItemsContainer">
      <div *ngFor="let saleItem of saleItems" id="itemContainer" >
        <p id="itemName">{{ saleItem.itemName }}</p>
        <p id="itemPrice">{{ saleItem.itemPrice }}</p>
        <img [src]="imageUrl + saleItem.imageID" alt="" id="itemImage" />
      </div>
    </div>
  </div>
</div>

使用 CSS 网格

<div id="backGroundImage">
  <div id="salesPageContainer">
    <div id="saleItemsContainer">
      <div *ngFor="let saleItem of saleItems" id="itemContainer" >
        <p id="itemName">{{ saleItem.itemName }}</p>
        <p id="itemPrice">{{ saleItem.itemPrice }}</p>
        <img [src]="imageUrl + saleItem.imageID" alt="" id="itemImage" />
      </div>
    </div>
  </div>
</div>

添加css到saleItemsContainer

#saleItemsContainer {
  display: grid;
  grid-column-gap: 0.5rem;
  grid-row-gap: 0.4rem;
  grid-template-columns: auto auto auto;
}