The previous project was done with the old angular.js. The previous loop traversal always used ng repeat. When using ng repeat, you can limit the number of loops, that is, limtTo. See the example:
<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">Stable financial products B</p> <p class="g-fontSize12 text-gray g-marginTop-10" ng-bind="item1.display_field | display_field">Seven day anniversary</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">Flexible access, steady revenue</p> <p class=""></p> </div> </div>
// ng-repeat="item1 in item.list | limitTo: tgwitem.number"
It's good to limit it directly with the filter limtTo.
However, the upgrade of angular.js to angular 2.0 has changed a lot. Loop traversal now uses * ngFor, for example
<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>
As far as I'm concerned, ngfor only circulates three times, and then jumps out of the loop after three times. Now I use ngif to judge the index subscript
But if it is set in HTML, it can be as follows:
let i of showmusicList.slice(0,3)
This effect can be achieved by detour. At present, it seems that these two methods are suitable for some.