ngFor の index 変数でループ処理をパワーアップ！
Angular の ngFor でインデックスを属性値として使用する方法
このディレクティブには、index という特別な変数があり、ループ内の現在のアイテムのインデックスを表します。この変数は、テンプレート内の任意の場所でアクセスできます。
属性値としてインデックスを使用する
index 変数は、属性値として使用することもできます。これは、ループ内のアイテムに個別の属性を設定する場合に役立ちます。
たとえば、次のコードは、items 配列内の各アイテムに対して <li> 要素を生成します。各 <li> 要素には、data-index 属性が設定されており、そのアイテムのインデックスが含まれています。
<ul>
<li *ngFor="let item of items; index as i" [attr.data-index]="i">
{{ item }}
</li>
</ul>
このコードは、次の HTML を生成します。
<ul>
<li data-index="0">Item 1</li>
<li data-index="1">Item 2</li>
<li data-index="2">Item 3</li>
</ul>
使用例
インデックスを属性値として使用できるいくつかの例を以下に示します。
- 各アイテムに個別の ID を設定する
ngFor ディレクティブの index 変数は、テンプレート内の任意の場所でアクセスできます。この変数は、属性値として使用することもできます。これは、ループ内のアイテムに個別の属性を設定する場合に役立ちます。
各アイテムに個別の ID を設定する
<ul>
<li *ngFor="let item of items; index as i" [id]="i">
{{ item }}
</li>
</ul>
<ul>
<li id="0">Item 1</li>
<li id="1">Item 2</li>
<li id="2">Item 3</li>
</ul>
各アイテムのスタイルを設定する
<ul>
<li *ngFor="let item of items; index as i" [style.color]="i % 2 === 0 ? 'red' : 'blue'">
{{ item }}
</li>
</ul>
<ul>
<li style="color: red;">Item 1</li>
<li style="color: blue;">Item 2</li>
<li style="color: red;">Item 3</li>
</ul>
各アイテムのクラスを設定する
<ul>
<li *ngFor="let item of items; index as i" [class]="i % 2 === 0 ? 'even' : 'odd'">
{{ item }}
</li>
</ul>
<ul>
<li class="even">Item 1</li>
<li class="odd">Item 2</li>
<li class="even">Item 3</li>
</ul>
各アイテムのデータ属性を設定する
<ul>
<li *ngFor="let item of items; index as i" [data-index]="i">
{{ item }}
</li>
</ul>
<ul>
<li data-index="0">Item 1</li>
<li data-index="1">Item 2</li>
<li data-index="2">Item 3</li>
</ul>
上記のサンプルコードは、ngFor ディレクティブの index 変数をどのように使用できるかの例です。この変数は、ループ内のアイテムに個別の属性を設定する場合に役立ちます。
ngFor でインデックスを扱う他の方法
trackBy オプション
ngFor ディレクティブには、trackBy オプションがあり、ループ内のアイテムを識別するために使用できます。このオプションは、関数を受け取り、その関数は各アイテムに対して一意の識別子を返す必要があります。
trackBy オプションを使用すると、index 変数を使用せずに、ループ内のアイテムを追跡できます。
<ul>
<li *ngFor="let item of items; trackBy: trackByFn">
{{ item }}
</li>
</ul>
trackByFn(item: any): any {
return item.id;
}
for ループ
ngFor ディレクティブの代わりに、従来の for ループを使用することもできます。
<ul>
<li *ngFor="let item of items; let i = index">
{{ item }}
</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
forEach メソッドを使用して、コレクション内の各アイテムをループ処理することもできます。
<ul>
<li *ngFor="let item of items">
{{ item }}
</li>
</ul>
items.forEach((item: any, i: number) => {
// ...
});
ngFor ディレクティブの index 変数は、ループ内のアイテムのインデックスにアクセスするための便利な方法です。ただし、インデックスを処理する方法は他にもあります。
angular ngfor
