NgSwitchCase: Angularで条件分岐を行う方法

2024-02-29 13:41 Angular 条件分岐 NgSwitchCase

Angularでは、条件分岐を行うために ngSwitchCase ディレクティブを使用することができます。このディレクティブは、ある式の値に基づいて異なるテンプレートを表示するために使用されます。

以下に、ngSwitchCase の使用方法とコード例をいくつか紹介します。

  1. 基本的な使用方法:

    <ng-container [ngSwitch]="expression">
<div *ngSwitchCase="value1">テンプレート1</div>
<div *ngSwitchCase="value2">テンプレート2</div>
<div *ngSwitchDefault>デフォルトのテンプレート</div>
</ng-container>

    上記の例では、expression の値に応じて、異なるテンプレートが表示されます。value1 と value2 は、expression の値と比較され、一致する場合に対応するテンプレートが表示されます。一致する値がない場合は、ngSwitchDefault のテンプレートが表示されます。

  2. 数値の条件分岐:

    <ng-container [ngSwitch]="number">
<div *ngSwitchCase="1">テンプレート1</div>
<div *ngSwitchCase="2">テンプレート2</div>
<div *ngSwitchCase="3">テンプレート3</div>
<div *ngSwitchDefault>デフォルトのテンプレート</div>
</ng-container>

    数値の場合、ngSwitchCase ディレクティブはそのまま数値を比較します。

  3. 文字列の条件分岐:

    <ng-container [ngSwitch]="text">
<div *ngSwitchCase="'apple'">りんご</div>
<div *ngSwitchCase="'orange'">オレンジ</div>
<div *ngSwitchCase="'banana'">バナナ</div>
<div *ngSwitchDefault>その他のフルーツ</div>
</ng-container>

    文字列の場合、ngSwitchCase ディレクティブはシングルクォートで囲んだ文字列を比較します。

これらはいくつかの基本的な例ですが、ngSwitchCase ディレクティブは他のディレクティブや条件分岐の組み合わせと一緒に使用することもできます。

お役に立てれば幸いです！