如何在Angular中结合*ngFor使用Bootstrap的card-group渲染商品列表

问题原因 #

你写的代码无法正常运行主要有两个核心问题：

• 多余DOM节点破坏Bootstrap结构：*ngFor被写在了额外的<div>标签上，导致.card不是.card-group的直接子元素，Bootstrap的card-group样式要求直接子元素必须是.card才能生效。
• 异步空值未处理：products$是Observable类型，页面首次渲染时async管道还没拿到返回结果，会返回null，直接遍历null会触发Angular报错。

正确实现代码 #

方案1：保留card-group布局 #

使用Angular虚拟容器ng-container承载*ngFor，不会生成多余DOM节点，同时提前接住异步返回结果避免空值报错：

<!-- 先接住异步返回的商品数组，同时处理空值情况 -->
<ng-container *ngIf="products$ | async as products">
  <div class="card-group">
    <!-- ng-container不会生成真实DOM，保证.card是card-group的直接子元素 -->
    <ng-container *ngFor="let p of products">
      <div class="card">
        <img
          [src]="getImage(p.id)"
          class="card-img-top"
          alt="{{p.name}}商品图"
        />
        <div class="card-body">
          <h5 class="card-title">{{p.name}}</h5>
          <p class="card-text">售价：¥{{p.price}}</p>
          <p class="card-text">{{p.description}}</p>
          <a href="#!" class="btn btn-primary">查看详情</a>
        </div>
        <div class="card-footer">
          <small class="text-muted">库存剩余：{{p.quantity}}件</small>
        </div>
      </div>
    </ng-container>
  </div>
</ng-container>

方案2：响应式网格布局（更常用） #

如果需要实现小屏1列、平板2列、大屏3列的响应式折行效果，用Bootstrap网格布局比card-group更灵活：

<ng-container *ngIf="products$ | async as products">
  <!-- g-4设置卡片之间的间距 -->
  <div class="row g-4">
    <!-- 响应式列宽：移动端1列、平板2列、桌面端3列 -->
    <div class="col-12 col-sm-6 col-lg-4" *ngFor="let p of products">
      <!-- h-100保证同一行卡片高度一致 -->
      <div class="card h-100">
        <img
          [src]="getImage(p.id)"
          class="card-img-top"
          alt="{{p.name}}商品图"
        />
        <div class="card-body">
          <h5 class="card-title">{{p.name}}</h5>
          <p class="card-text">售价：¥{{p.price}}</p>
          <p class="card-text">{{p.description}}</p>
          <a href="#!" class="btn btn-primary">查看详情</a>
        </div>
        <div class="card-footer">
          <small class="text-muted">库存剩余：{{p.quantity}}件</small>
        </div>
      </div>
    </div>
  </div>
</ng-container>

补充优化点 #

可以给getImage方法加空值判断，避免商品id未定义时生成错误的请求地址：

getImage(id: any){
  return id ? "http://localhost:5000/getImage/"+id : "本地占位图地址";
}

内容的提问来源于stack exchange，提问作者Leonard Loss