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。