Angular 中帶有 ngFor 的 trackBy 函式
本文將使用 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>
輸出:
點選這裡檢視程式碼示例的演示。
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook