avatar
*NgFor 指令

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 介绍