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;
    //省略...
}