Angular の ngFor を使用した trackBy 関数

Muhammad Adil 2023年1月30日
  1. Angular の ngFortrackBy 関数を使用する
  2. Angular での ngFor 関数の使用
  3. Angular で ngFor を使用して trackBy を使用する
Angular の ngFor を使用した trackBy 関数

この記事では、ngFor ディレクティブを使用して trackyBy と Angular でのその利用に取り組みます。

Angular の ngFortrackBy 関数を使用する

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 関数は、indexcurrent 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>

出力:

Angular の ngFor を使用した trackBy 関数

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

著者: Muhammad Adil
Muhammad Adil avatar Muhammad Adil avatar

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

関連記事 - Angular Function