发布于 4个月前

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。
©2020 edoou.com   京ICP备16001874号-3