从 JSON 拉入的产品未显示在网格中

Question

我正在从 JSON 文件中提取内容，以填充我正在处理的电子商务网站的产品网格。加载数据时，它会在 1 列或（1 行）而不是网格中显示所有产品。这部分的所有 CSS 来自默认的 Bootstrap 4 个值。我需要你的帮助来解决这个问题。

谢谢

这是在我称为“产品”的页面上显示它们的代码

<div class="product container d-flex justify-content-center mt-50 mb-50"> 
            <div class="card">
                <div class="card-body">
                <div class="card-img-actions"> <img src="{{product.imageUrl}}" class="card-img img-fluid" width="96" height="350" alt=""> </div>
                </div>
                <div class="card-body bg-light text-center">
                    <div class="mb-2">
                        <h6 class="font-weight-semibold mb-2"> <a routerLink="/products/{{product.id}}" class="text-default mb-2" data-abc="true">{{product.title}}</a> </h6> 
                            </div>
                    <h3 class="mb-0 font-weight-semibold">{{product.price}}</h3>
                    Available in size: {{product.size}} 
                    <button type="button" class="btn bg-cart"> Buy Now </button>
                </div>
            </div>
    </div>

下面是我在 products.components.html

上的内容

<app-header></app-header>
<app-item *ngFor="let product of products" [product]= "product"></app-item> 
<app-footer></app-footer>

This is the expected result I want to acheive

Here is what I am getting

enter image description here

Answer 1

我认为你没有遵循 bootstrap 如何构建卡片网格的原则。

当您将 .container class 放入应用程序项时，您将在每个循环中创建一个新容器，我猜您不希望这样。相反，您只需要一个容器，然后将卡片作为列。

见https://getbootstrap.com/docs/5.1/components/card/#grid-cards

<app-header></app-header>
<div class="container">
   <div class="row row-cols-md-3">
      <ng-container *ngFor="let product of products">
         <app-item [product]="product"></app-item> 
      </ng-container>
   </div>
</div>
<app-footer></app-footer>

而在您的应用项目中，您只有列。

<div class="product col"> 
   <div class="card">
 ...
   </div>
</div>

从 JSON 拉入的产品未显示在网格中

Products Pulled in from JSON not displaying in a grid

css

json

e-commerce

angular