AngularでngFor文を使用して最初の要素を取得する方法

最初の要素を変数に代入する方法: ngForディレクティブでは、index変数を使用して現在の反復インデックスを取得できます。最初の要素の場合、indexが0となります。ngForディレクティブに変数を指定し、最初の要素の場合にのみ代入するようにします。

例:

<ng-container *ngFor="let item of items; let first = first">
 <div *ngIf="first">
   {{ item }}
 </div>
</ng-container>

最初の要素を関数で取得する方法: コンポーネントのメソッドを使用して、ngForディレクティブで反復処理されるリストや配列から最初の要素を取得することもできます。

例:

<ng-container *ngFor="let item of items">
 <div *ngIf="isFirstItem(item)">
   {{ item }}
 </div>
</ng-container>

// コンポーネントのメソッド
isFirstItem(item: any): boolean {
 return this.items.indexOf(item) === 0;
}