为 ngfor 生成的 dom 个元素设置样式
Styling dom elements generated by ngfor
背景: 所以我从后端获取了一些数据,这些数据作为数组存储在我的 Angular 前端。现在我试图在模板上显示这些元素(它们是产品)中的每一个。我基本上想要实现的是用户可以浏览的页面上的产品。
问题:问题是ngfor只是简单地在模板上以垂直线一个接一个地绘制元素。我想要的是能够应用一般样式设置(也许在托管 ngfor 的父元素上?)所以元素从页面的左上角到右上角在一行中从 1 到 X 个元素根据视口宽度,然后在接下来的行中继续这样,直到原始数组中还剩下 none。 PS。我曾尝试在父元素中使用 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>
在此处检查示例实施 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>
在普通css中应用cssdisplay: 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;
}
背景: 所以我从后端获取了一些数据,这些数据作为数组存储在我的 Angular 前端。现在我试图在模板上显示这些元素(它们是产品)中的每一个。我基本上想要实现的是用户可以浏览的页面上的产品。
问题:问题是ngfor只是简单地在模板上以垂直线一个接一个地绘制元素。我想要的是能够应用一般样式设置(也许在托管 ngfor 的父元素上?)所以元素从页面的左上角到右上角在一行中从 1 到 X 个元素根据视口宽度,然后在接下来的行中继续这样,直到原始数组中还剩下 none。 PS。我曾尝试在父元素中使用 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>
在此处检查示例实施 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>
在普通css中应用cssdisplay: 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;
}