Angular * ngFor用列表项重复按钮

Question

我正在使用 Angular 2 构建一个Web应用程序，并希望循环使用列表项但不在列表项之外的按钮，如何使用 * ngFor ，请帮忙。

我的HTML代码：

<div class="col-xs-6">
            <a class="list-group-item clearfix" style="background-color:rgb(3, 0, 48)" *ngFor="let buying of buy">
                <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"> <-----I WANT TO LOOP THIS BUTTON
                <button class="btn btn-primary ; pull-right">Add To Cart</button>
            </div> 

Answer 1

试试这段代码。我创建了一个div标签，上面链接了两个内容，然后在其中添加了循环，因此它将引用这两个元素（项目和按钮）。

<div *ngFor="let buying of buy">
  <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">
    <button class="btn btn-primary ; pull-right">Add To Cart</button>
  </div>
</div>