Angular の ngFor を使用した trackBy 関数
![Angular の ngFor を使用した trackBy 関数](/img/Angular/feature-image---trackby-function-with-ngfor-in-angular.webp)
この記事では、ngFor
ディレクティブを使用して trackyBy
と Angular でのその利用に取り組みます。
Angular の ngFor
で trackBy
関数を使用する
Angular では、trackBy
機能により、ユーザーは特定のキーを選択できます。このキーを使用して、そのキーに基づいてリスト内の各アイテムを分析します。trackBy
は、それぞれに一意の識別子を提供したいネストされた配列とオブジェクトがある場合に特に便利です。
trackBy
は配列またはオブジェクトの現在の反復にのみ適用され、将来のすべての反復には適用されないことに注意することが重要です。
Angular での ngFor
関数の使用
HTML
には組み込みのテンプレート言語がないため、Angular は、コンピューター言語の for-loops
に類似した ngFor
のようないくつかのディレクティブを含む強力なテンプレート構文を追加します。
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
の 2つの引数を受け入れます。アイテムの特定の ID を返す必要があります。
Angular
は、特定の ID に応じて追加または削除されたコンポーネントを追跡できるようになりました。配列を更新すると、コンストラクターのみが既に変更されている項目を削除します。
Angular で ngFor
を使用して trackBy
を使用する
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