ngFor

[deepthan]

*ngFor使用方法

简要写法

<div *ngFor="let book of books; 
    let i=index; 
    let isFirst=first;
    let isLast=last;
    let isEven=even;
    let isOdd=odd; 
    trackBy: trackByFunction" >
 
</div>

• let book of books: 循环books，循环的每一项是book
• let i=index：index是当前下标，赋值给 i, 下面的形式相同。
• first：first：是否为第一项，赋值给isFirst
• last: 是否为最后一项
• even： 是否为偶数项
• odd： 是否为奇数项

trackByFunction是一个函数，它的第一个参数是当前的index，第二个是当前的项，它需要返回一个数据，angular看它是否改变来判断这一项是否应该被重新渲染（提升性能）。

trackByFunction(index, book){
    return book.id;
}

上面表示如果id改变了则这一项会重新渲染。

还可以这样写

let i=index可以写成index as i

<div *ngFor="let book of books; 
    index as i; 
    first as isFirst;
    last as isLast;
    even as isEven;
    odd as isOdd;" >
 
</div>

或者

<ng-template ngFor let-book [ngForOf]="books" let-i="index">
  {{ book }}
</ng-template>

但是这种写法只能在ng-template上写。