Angular中如何使用好NgForOf的trackBy

這篇文章主要介紹“Angular中如何使用好NgForOf的trackBy”，在日常操作中，相信很多人在Angular中如何使用好NgForOf的trackBy問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Angular中如何使用好NgForOf的trackBy”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

要想自定義默認的跟蹤算法，NgForOf支持trackBy選項。trackBy接受一個帶兩個參數（index和item）的函數。 如果給出了trackBy，Angular 就會使用該函數的返回值來跟蹤變化。

來個例子：

假設有這樣的一個html

<a (click)="add()">添加</a>

<ul>

  <li 

    *ngFor="let i of arr; index as ii; trackBy: trackFunc">

    {{i.id}} / {{ i.name }}

   </li>

</ul>

2. 然后來點ts

arr = [

  { id: 1, name: 'a' },

  { id: 2, name: 'b' },

  { id: 3, name: 'c' },

  { id: 4, name: 'e' }

];

trackFunc = (index, item) => {

  // 改變這里查看頁面dom刷新狀況

  return index;

  // return 'xxx';

  // return item.id;

  // return item.name;

 };

 add() {

   const last = this.arr[this.arr.length - 1];

   this.arr.unshift({

     id: last.id, // 新加的元素id與開始定義的最后一個元素id相同，請注意！

     name: Math.random().toString() // 新加的元素name是隨機字符

   });

 }

3. 運行

以不停的往數組開始插入元素，查看頁面刷新的情況。

（1）return index;

刷新全部li

（2）return item.id;

只會刷新id相同的li

（3）return item.name;

只會刷新name變化的li

（4）return 'xxx'; 純粹搞事情。。。

情況跟return index一樣，刷新全部的li

通過以上的實踐可知：

（1）return index: 數組索引變化觸發刷新。

（2）return item.id: 最后個元素Id與新增的元素id相同，但也在刷新；但id為1，2，3的元素，從未刷新；再以追加的方式添加元素時，id為4的未在刷新。

（3）return item.name: name屬性變化觸發了刷新。

（4）return 'xxx': 返回與index和item都不相關的固定值，也會觸發全部刷新。

到此，關于“Angular中如何使用好NgForOf的trackBy”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！