Angular 设置ngfor生成的dom元素的样式

背景：因此，我从后端获取一些数据，并将其作为数组存储在角度前端。现在我试图在模板上显示这些元素中的每一个（都是产品）。我基本上是想把产品放在一个用户可以浏览的页面上

问题：问题在于ngfor只是在模板的垂直线上一个接一个地绘制元素。我想要的是能够应用常规样式设置（可能是在托管ngfor的父元素上），因此元素从页面的左上角到右上角，按照视口宽度从1到X的元素数排列，然后在以下行上继续，直到原始数组中没有剩余的元素。另外，我曾尝试在父元素中使用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>

{{saleItem.itemName}
{{saleItem.itemPrice}

在此处检查示例实现

如果应用程序中有引导程序，请添加

class=“d-flex-flex-wrap”，如下所示

<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>

使用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>

---

对于*ngFor生成的样式元素没有特殊规则。只需在元素上放置一个类，并在css中设置该类的样式。顺便说一句，现在您正在使用相同的

id

属性生成X个元素，这不是一个好的HTML。非常感谢您的回复。这很有帮助。我想知道是否有一种方法也可以使css网格工作。例如，假设我添加了display:grid；至id=“saleItemsContainer”。我应该向id=“itemContainer”添加什么，以便对模板上绘制的数组的所有元素应用常规样式？@BlitzMee检查我用Css网格示例更新的stackblitz，如果您觉得有用，请接受答案，upvoteThis工作得很好。非常感谢。我已经接受了答案。但我不能投赞成票，因为我在我的问题上投了几张反对票，而我的代表票已经不够高了。尽管如此，我现在有16个代表接受了答案。得票最多：）

<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>

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