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