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>

Angular * ngFor用列表项重复按钮

1 个答案: