Angular指令ngFor和ngForOf

NgForOf指令

ngFor和ngForOf都是指令NgForOf的selector。定义如下：

@Directive({selector: '[ngFor][ngForOf]'})
export class NgForOf<T, U extends NgIterable<T> = NgIterable<T>> implements DoCheck {
     …
}

NgForOf指令是结构化指令，它会对集合数据做迭代，每次迭代的元素使用同一模板进行渲染。

NgForOf指令有两种使用方式：

• *ngFor：这是NgForOf指令的语法糖方式，语法短且便捷。
• ngForOf：用在template里的长模式。

*ngFor语法糖模式

ngFor示例：

<li *ngFor="let item of items; index as i; trackBy: trackByFn">...</li>

template语法模式

上面的*ngFor语法糖示例，去掉语法糖后，可以演化为长的template语法模式：

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
 <li>...</li>
</ng-template>

NgForOf指令本地变量

NgForOf指令提供了一些用于本地变量的值，如示例：

<li *ngFor="let item of items; index as i; first as isFirst; last as isLast">
 {{i}}. {{item}} <span *ngIf="isFirst">First</span> <span *ngIf="isLast">Last</span>
</li>

• $implicit: T: 迭代的当前元素
• index: number: 当前迭代项的索引，从0开始
• count: number: 集合的元素数量
• first: boolean: 集合迭代的第一个元素，值为true，其他为false
• last: boolean: 集合迭代到最后一个元素，值为true，其他为false
• even: boolean: 集合迭代的偶数项为true。
• odd: boolean: 集合迭代的奇数项为true。