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