Angular 2中如何用*ngFor在列表项外部循环按钮？

你现在的问题是想让每个商品条目对应一个独立的"Add To Cart"按钮，但目前按钮和循环的列表项分属两个独立的列——如果直接给按钮也加个*ngFor，会导致左边一堆条目、右边一堆按钮，没法做到一一对应。

正确的思路是把每一行的商品列和按钮列包裹在同一个容器里，然后对这个容器应用*ngFor，这样每一次循环都会生成完整的一行：左边是商品条目，右边是对应的按钮。

修改后的代码如下：

<!-- 外层容器循环每一个buying项，生成完整的一行 -->
<div *ngFor="let buying of buy" class="row">
  <!-- 左侧的商品展示列 -->
  <div class="col-xs-6">
    <a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)">
      <div class="pull-left" style="max-width:350px">
        <h5 style="color:white">{{buying.names}}</h5>
        <p style="color:white">{{buying.desc}}</p>
      </div>
      <div>
        <span class="pull-right" >
          <img [src]="buying.getImg" alt="image not loaded" class="img-responsive" style="max-height:100px">
        </span>
      </div>
    </a>
  </div>
  <!-- 右侧的对应按钮列 -->
  <div class="col-xs-6">
    <!-- 可以给按钮绑定点击事件，传入当前的buying对象，方便后续处理 -->
    <button class="btn btn-primary pull-right" (click)="addToCart(buying)">Add To Cart</button>
  </div>
</div>

核心改动说明： #

1. 移除了原a标签上的*ngFor，把循环逻辑移到了外层的row容器上，确保每一次循环都会生成"商品+按钮"的完整组合，保证条目和按钮一一对应。
2. 按钮的点击事件可以传入当前的buying对象，这样你在组件的addToCart方法里就能明确知道是哪个商品要被加入购物车。
3. 如果你的布局不需要row类，也可以用普通div代替外层容器，只要保证左右两列在同一个循环上下文里就行。

内容的提问来源于stack exchange，提问作者Rohit B