Angular の ngFor を使用した trackBy 関数

1. Angular の ngFor で trackBy 関数を使用する
2. Angular での ngFor 関数の使用
3. Angular で ngFor を使用して trackBy を使用する

この記事では、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>

出力：

ここをクリックして、コードサンプルのライブデモを確認してください。