AngularでngForに関してインデックスをつけてループさせたいとき
今回はAngularでngForを使ってループさせたときに、ループさせる変数だけ使うのではなくindexをつけてループさせたい場合はどうすれば良いのかについてご紹介いたします。
AngularでngForに関してインデックスをつけてループさせたいとき
結論から言うとAngularのバージョンが2以上の場合は次のように書きましょう。
iの部分が0から始まるインデックスとなります。
|
1 2 3 4 |
<ng-container *ngFor="let loopVal of loopVals; let i = index" [attr.data-index="i"]> {{ i }} {{ loopVal }} </ng-container> |
Angularのバージョンが1の場合は次のように書くそうです。
|
1 2 3 4 |
<ng-container *ngFor="let loopVal of loopVals; #i = index" [attr.data-index="i"]> {{ i }} {{ loopVal }} </ng-container> |
結構特殊な書き方をするような気がするので、もしかしたらループさせたときにindexを使わない他の方法を模索した方が良いかもしれません。
終わりに
今回はAngularでngForを使ってループさせたときに、ループさせる変数だけ使うのではなくindexをつけてループさせたい場合はどうすれば良いのかについてご紹介いたしました。