angular - ngFor, trackby

ngFor

ngForOf指令通常使用缩写形式*ngFor为集合中的每个项呈现模板的结构指令。该指令放置在元素上，该元素将成为克隆模板的父级。

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

一般使用是：

const list = [{age: '16'}, {age: '18'}, {age: '15'}]

<li *ngFor="let item of list; index as i>{{item.age}}</li>
// 或者
<li *ngFor="let item of list; let i = index">{{item.age}}</li>

使用trackBy提高性能

trackBy: trackByFn 定义如何跟踪iterable中项的更改的函数。

在iterable中添加、移动或移除项时，指令必须重新呈现适当的DOM节点。为了最小化DOM中的搅动，只重新呈现已更改的节点。

默认情况下，更改检测器假定对象实例标识iterable中的节点。提供此函数时，指令使用调用此函数的结果来标识项节点，而不是对象本身的标识。

函数接收两个输入，迭代索引和节点对象ID。

要想自定义默认的跟踪算法，NgForOf 支持 trackBy 选项。 trackBy 接受一个带两个参数（index 和 item）的函数。

如果给出了 trackBy，Angular 就会使用该函数的返回值来跟踪变化。

@Component({
  selector: 'my-app',
  template: `
    <ul>
         <li *ngFor="let item of list;">{{item.age}}</li>
          <li *ngFor="let item of list;trackBy: trackByFn">{{item.age}}</li>
    </ul>
    <button (click)="getItems()">Refresh items</button>
  `,
})
export class App {
　　list = [{age: '16'}, {age: '18'}, {age: '15'}];

　　constructor() { 
　　　　this.list= [{age: '16'}, {age: '18'}, {age: '15'}]
　　}

　　getItems() { 
　　　　this.list= [{age: '16'}, {age: '18'}, {age: '15'}, {age: '80'}]
　　} 

　　trackByFn(index, item) { 
　　　　return item.age; // or index
　　} 
}            

列表发生变化是，如果没有添加 trackBy ， 那么与数据关联度的所有DOM元素会重新渲染；

如果使用trackBy ：更改列表时，Angular可以根据唯一标识符跟踪已添加或删除的项目，并仅创建或销毁已更改的项目。

局部变量

const list = [{age: '16'}, {age: '18'}, {age: '15'}];
<li *ngFor="let item of list; first as isFirst">{{item.age}} <span *ngIf="isFirst">岁</span> </li>
/*
　　16岁
　　18
　　15
*/

NgForOf 导出了一系列值，可以指定别名后作为局部变量使用：

• $implicit: T：迭代目标（绑定到ngForOf）中每个条目的值。

• ngForOf: NgIterable<T>：迭代表达式的值。当表达式不局限于访问某个属性时，这会非常有用，比如在使用 async 管道时（userStreams | async）。

• index: number：可迭代对象中当前条目的索引。

• first: boolean：如果当前条目是可迭代对象中的第一个条目则为 true。

• last: boolean：如果当前条目是可迭代对象中的最后一个条目则为 true。

• even: boolean：如果当前条目在可迭代对象中的索引号为偶数则为 true。

• odd: boolean：如果当前条目在可迭代对象中的索引号为奇数则为 true。