Angular 中帶有 ngFor 的 trackBy 函式

1. 在 Angular 中使用帶有 ngFor 的 trackBy 函式
2. 在 Angular 中使用 ngFor 函式
3. 在 Angular 中使用 trackBy 和 ngFor

本文將使用 ngFor 指令及其在 Angular 中的使用來解決 trackyBy。

在 Angular 中使用帶有 ngFor 的 trackBy 函式

在 Angular 中，trackBy 功能允許使用者選擇一個特定的鍵，該鍵將用於基於該鍵分析列表中的每個專案。當你有巢狀的陣列和物件想要為每個陣列和物件提供唯一識別符號時，trackBy 特別有用。

重要的是要注意 trackBy 僅適用於陣列或物件的當前迭代，而不是所有未來的迭代。

在 Angular 中使用 ngFor 函式

由於 HTML 缺少內建的模板語言，Angular 新增了強大的模板語法，包含多個指令，如 ngFor，類似於計算機語言中的 for-loops。

NgFor 是 Angular 中的內建指令，可用於迭代陣列或物件。該指令為列表中的每個專案建立一個模板，將其新增到 DOM，並在專案發生更改時更新 DOM。

語法：

<ul>
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>

我們使用 ngFor 指令來迭代任何陣列或物件集合。但是，如果我們需要在某個時候更新集合中的資訊，例如響應一個 HTTP 請求，我們就會遇到問題。

因此，Angular 必須刪除並重新建立所有與資料連結的 DOM 元素。我們幫助 Angular trackBy 函式來解決這個問題。

trackBy 函式接受兩個引數，index 和 current item。它必須返回專案的特定標識。

Angular 現在可以根據特定身份跟蹤新增或刪除了哪些元件。只有建構函式會刪除更新陣列時已經修改的專案。

在 Angular 中使用 trackBy 和 ngFor

讓我們討論使用 Angular 的 ngFor 指令的 trackBy 函式。

• 首先，我們必須瞭解 Angular 的基本原理以及它是如何工作的。
• 我們必須安裝最新版本的 Angular 命令列介面。
• 系統必須安裝最新的 Node JS 版本。

我們現在將建立一個程式，該程式使用模板的陣列來顯示有關員工的資訊。我們使用 ngFor 指令迴圈遍歷員工陣列並顯示每個員工的基本資訊。

我們還建立了一個 trackBy 方法，該方法必須唯一標識每個員工並將其分配給 ngFor 指令。

程式碼片段 - app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  informations: { id: number; name: string; Age: string; }[];

  EmplyeesInfo(){
    this.informations = [
      { id:1, name:'Adil',  Age:' (Age 24)' },
      { id:2, name:'Steve' , Age:' (Age 30)'},
      { id:3, name:'John' ,Age:' (Age 27)'},
      { id:2, name:'Sofia' , Age:' (Age 23)' },
      { id:3, name:'Adam', Age: ' (Age 36)' }
    ];
  }
  trackEmployee(index: any,information: { id: any; }){
    return information ? information.id : undefined;
  }
}

程式碼片段 - app.component.html：

<button (click)="EmplyeesInfo()">Employees Information</button>
<ul>
  <li *ngFor="let information of informations; trackBy: trackEmployee">
    {{ information.name }}
    {{ information.Age }}
  </li>
</ul>

輸出：

點選這裡檢視程式碼示例的演示。