之前做專案的時候是用老的angular.js做的，之前迴圈遍歷一直都是用ng-repeat，用ng-repeat的時候可以限制迴圈的次數，就是用limtTo，請看示例：

<div class="tgw-desc-lie">
            <div class="tgw-desc-lie-item tgw-padding15 tgw-borderBottom"
                 ng-repeat="item1 in item.list | limitTo: tgwitem.number"
                 ng-click="productDetailFn(item1.prod_code,item1.fund_type,item1.incometype,item1.fundsubtype,item1.is_baby)">
                 // ng-repeat="item1 in item.list | limitTo: tgwitem.number"
                <p class="g-fontSize15 g-marginBottom-5 g-width165 text-truncate g-marginauto" ng-bind="item1 | supportprivate : specialPsersons">穩健理財產品B</p>
                <p class="g-fontSize12 text-gray g-marginTop-10" ng-bind="item1.display_field | display_field">七日年化</p>
                <p class="g-fontSize18 g-marginBottom-2 g-marginTop-4" ng-class="item1.display_field | display_class : item1" ng-bind="item1.display_field | display_data : item1"></p>
                <p class="g-fontSize12 g-width180 g-marginTop-8 text-gray g-height17 text-truncate g-marginauto" ng-bind="item1.slogan">靈活存取，收益穩健</p>
                <p class=""></p>
            </div>
        </div>
 

// ng-repeat="item1 in item.list | limitTo: tgwitem.number"
直接用過濾器limtTo來限制，很不錯。
但是angular.js升級到angular2.0之後就變了，改觀很大。迴圈遍歷現在用的是*ngFor，示例如下

<div class="hot-img-div">
  <div *ngFor="let i of showmusicList;let id = index" (click)="showList(i.discover_id)">
    <div *ngIf="id>2 === false">
      <img src={{i.discover_pic}} class="hot-music-img" >
      <p>{{i.discover_title}}</p>
    </div>
  </div>
</div>
 

就我想ngfor只迴圈3次，然後到了3次之後跳出迴圈，我現在用的是ngif去判斷index的下標來的
但是在HTML中設定的話，可以這樣：

 let i of showmusicList.slice(0,3)

可以迂迴實現這種效果，這個目前好像這兩種方法適合一些。