【Angular】ngForで指定した要素の時に表示を変える

こんにちは。
株式会社HITOSUKEでシステムエンジニアをしているTです。
今回はAngularのngForで使用できる特殊変数を使って指定した要素の時に表示を変える実装を行います。

実装

最初と最後の要素の表示を変える

まず初めに特殊変数「first」と「last」を使用して、最初と最後の要素が表示されたときに、背景の色を変えて表示できるようにします。

画像の通り、最初の要素の背景を赤に変更し、最後の要素の背景を青に変更しました。
実際のソースコードはこのようになっています。

app.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  array: any = [0, 1, 2, 3, 4, 5];
  ngOnInit(): void {
  }
}

app.component.html

<ul>
  <li *ngFor="let n of array; last as last; first as first;">
    {{n}}
    <span *ngIf="first" style="background-color: red;">これが最初の要素です</span>
    <span *ngIf="!last && !first">残りの要素があります</span>
    <span *ngIf="last" style="background-color: blue;">これが最後の要素です</span>
  </li>
</ul>

はじめにapp.component.htmlの<li>にngforで配列の要素を順に表示するための処理を記述します。
その後ろに、同じダブルクォーテーション内に特殊変数の宣言を行います。
今回の場合は「last as last;」と「first as first;」の記述になります。
なお、変数として宣言しているのは、asの後ろになりますので、「last as l」や「first as f」のような書き方をしても問題ありません。

次に三つの<span>とngIfの組み合わせで、任意のタイミングで表示させたい文字列やスタイルを記述します。
今回の実装で最初の要素でなく、かつ最後の要素でない要素の時は「*ngIf="!last && !first"」と記述してデフォルトの表示を行いましょう。

指定した添字の要素の表示を変える

次に配列の添字を指定して、該当の要素の表示を変更していきます。

実際のソースコードはこのようになっています。
app.component.tsは先ほどと同じものを使用します。

app.component.html

<ul>
  <li *ngFor="let n of array; index as index;">
    {{n}}
    <span *ngIf="index == 2" style="background-color: red;">指定した添字です</span>
    <span *ngIf="index != 2">指定されていません</span>
  </li>
</ul>

先ほどと同じようにngForを宣言して、今度は「index as index;」という記述をします。
この特殊変数indexには表示する際の要素の添字が入っています。
今回はindexの値が2か否かを判断して、表示の変更を行っています。

奇数と偶数の要素の表示を変える

最後に奇数の要素と偶数の要素の表示を変更します。
実装はこのような表示になります。

実際のソースコードはこのようになっています。
app.component.tsは先ほどと同じものを使用します。

app.component.html

<ul>
  <li *ngFor="let n of array; odd as odd; even as even;">
    {{n}}
    <span *ngIf="odd" style="background-color: red;">奇数です</span>
    <span *ngIf="even" style="background-color: blue;">偶数です</span>
  </li>
</ul>

添字が奇数の要素は「odd as odd;」で、偶数の要素は「even as even;」で宣言します。
今回のような奇数か偶数かの要素の変更のみであれば、特殊変数を二つ宣言せずに、「*ngIf="!odd"」で奇数か否かを判定して表示できますね。

Angular公式ドキュメント（https://angular.jp/api/common/NgForOf）

さいごに

もし、HITOSUKEのシステム開発Unitの知りたいことや興味・関心がありましたらぜひコメントください！

※HITOSUKEでは一緒に事業を盛り立ててくれる仲間を募集しています！

少しでも気になってくれた方は、こちらをご覧ください

HITOSUKE採用サイト | フランチャイズのプロフェッショナル集団