Angular *ngFor 重复带有列表项的按钮答案

【问题标题】：Angular *ngFor to repeat buttons with list itemsAngular *ngFor 重复带有列表项的按钮
【发布时间】：2018-01-14 10:50:51
【问题描述】：

我正在使用 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>

【问题讨论】：

您能否通过示例列表分享一些预期的输出
buy 是对象还是数组，你能检查一下吗..？
@chiragsorathiya 它是一个数组。
@RICKYKUMAR 我想做这样的（jqueryscript.net/images/…）
我认为提供的答案会对您有所帮助

标签： javascript html angular typescript ngfor

【解决方案1】：

试试这个代码 sn-p。我在上面创建了一个链接两个内容的 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>

【讨论】：