NgFor 是一个结构性指令，它为集合中的每个项目渲染一个模板。该指令放置在一个元素上，该元素成为克隆模板的父元素

ngForOf 指令通常以简写形式 *ngFor 使用

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

Angular 在编译模板时会自动展开简写语法，即在 <ng-template> 元素上使用 ngForOf 选择器

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

ngForOf 提供了导出值，可以将其别名用作局部变量

<li *ngFor="let user of users; index as i; first as isFirst">
  {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span>
</li>

可以将以下导出值别名为局部变量：

$implicit: T：表示迭代器中各个项目的值（ngForOf）。
ngForOf: NgIterable<T>：表示迭代表达式的值。当表达式比属性访问复杂时，例如使用异步管道（userStreams | async）时，这非常有用。
index: number：表示当前项目在迭代器中的索引。
count: number：表示迭代器的长度。
first: boolean：指示项目是否为迭代器中的第一个项目。
last: boolean：指示项目是否为迭代器中的最后一个项目。
even: boolean：指示项目在迭代器中是否具有偶数索引。
odd: boolean：指示项目在迭代器中是否具有奇数索引。

如果迭代器由服务器 RPC (远程过程调用) 生成，并且重新运行该 RPC，即使数据没有改变，第二次响应也会生成具有不同标识的对象。在这种情况下，Angular 必须重新构建整个 DOM（类似于删除所有旧元素并插入所有新元素）

为了避免这种代价高昂的操作，可以通过为 NgForOf 提供 trackBy 选项来自定义默认的跟踪算法

下面是一个示例的 trackByFn 函数，假设项目具有 id 属性作为唯一标识：

trackByFn(index: number, item: any): number {
  return item.id;
}

在官方提供的入门教程示例中就有使用到该指令，点击前往查看

<section>
  <form>
    <input type="text" placeholder="Filter by city" #filter>
    <button class="primary" type="button" (click)="filterResults(filter.value)">Search</button>
  </form>
</section>
<section class="results">
  <app-housing-location *ngFor="let housingLocation of filteredLocationList" [housingLocation]="housingLocation"></app-housing-location>
</section>

关于该指令更多信息请查看官网 Api 介绍