Angularにおけるループの最後の反復
*ngForや@forで反復処理を行う際、
変数lastを使用してループの最後の反復を
識別できます。
*ngForディレクティブの例:
<ul>
<li *ngFor="let el of arr; let last = last">
{{ last ? '最後' : '' }}
{{ el }}
</li>
</ul>
@for構造の例:
<ul>
@for (el of arr; track $index) {
<li>
{{ $last ? '最後' : '' }}
{{ el }}
</li>
}
</ul>
以下の配列があります:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
配列の要素をulリストとして表示し、
最後のliを赤色にしてください。
以下の配列があります:
export class AppComponent {
public arr: string[] = ['a', 'b', 'c', 'd'];
}
配列の要素をulリストとして表示し、
最初のliを赤色に、最後のliを
緑色にしてください。