angular2 ngfor循环

 

angular2 在组件模板中能够循环数组集合等对象,语法很是简单,如:

 <ng-container *ngFor="let item of model.list">
                    <div class="sermons-post">
                      {{item.name}}
                     </div>
</ng-container>

可是,不少状况下咱们须要的是另外一种循环方式,常见的根据计数条件来循环指定的次数,如js的:for(var n=0;n<10;n++ )

然而高大上的angular2确并不支持这种比较基础的语法(抱歉我没谷歌到,若是有,请告诉我),若是想实现这种方式的模板指令循环,能够采起一种迂回的方式,将指定循环的数字

转换成对应大小的数组,作法以下:

在模板中将数字转换成对应大小的数组

  <ng-container *ngFor="let i of  arr(model.pages).fill(1);let n=index">
        <li>
<a [routerLink]="['/list',1,{page:n+1}]" >{{n+1}}</a>
        </li>
 </ng-container>

组件中须要定义arr对象,它是Array数组对象的别名,

export class ListContentsecComponent implements OnInit {
    arr = Array;
    //省略...
}