ngfor 循环中的中断标记答案

【问题标题】：Break tag in ngfor loopngfor 循环中的中断标记
【发布时间】：2020-06-26 02:41:30
【问题描述】：

所以我试图在我的 Angular 9 和引导项目中列出数据库中的产品卡我的问题是如果它们在不同的行上，卡之间的空间太小了这是我的代码：

  <div class="row d-flex justify-content-center">
    <div *ngFor="let product of products" class="card-deck">
      <div *ngIf="product.for_sale === 1" class="card" style="width: 18rem; text-align: center;">
        <img id="productimg" class="card-img-top" src="{{product.image}}" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">{{product.product}}</h5>
          <p class="card-text"> £{{product.price}}</p>
          <a href="#" class="btn btn-primary">Order now</a>
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

只使用卡片上的边距。
非常感谢您。

标签： html angular ngfor web-frontend

【解决方案1】：

试试 ngStyle 指令。有了这个，您可以在运行时根据您想要的条件更改组件样式。因此，例如，如果您的组件断线，使用 'ngStyle' 指令，您可以在条件为真的情况下设置插入更大宽度的条件，以此类推。

例子：

<div *ngIf="product.for_sale === 1" class="card" [ngStyle]="{width: condition ? '18rem' : '20rem'}">
        <img id="productimg" class="card-img-top" src="{{product.image}}" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title">{{product.product}}</h5>
          <p class="card-text"> £{{product.price}}</p>
          <a href="#" class="btn btn-primary">Order now</a>
        </div>
      </div>

【讨论】：