Angular の if...else ステートメント

Angular アプリケーションで if ステートメントを使用する方法を紹介し、例について説明します。

Angular で if ステートメントを使用する

プログラミングでは、if ステートメントは論理ブロックです。これらの条件ステートメントは、特定の条件が真または偽の場合に何をすべきかをコンピューターに指示します。

Web アプリケーションの現代では、if ステートメントを使用すると、条件に基づいて特定のコードブロックをいつ実行するかをプログラマーの生活が理解しやすくなります。

*ng-if または例で説明する別の簡単な方法を使用して、Angular で if ステートメントを使用するさまざまな方法があります。

次のコマンドを使用して、新しいアプリケーションを作成しましょう。

# angular
ng new my-app

新しいアプリケーションを Angular で作成した後、このコマンドを使用してアプリケーションディレクトリに移動します。

# angular
cd my-app

それでは、アプリを実行して、すべての依存関係が正しくインストールされているかどうかを確認しましょう。

# angular
ng serve --open

次に、app.component.ts で、変数 statement を false として設定します。この変数を使用してコードを実行します。

# angular
statement = false;

次に、app.component.html で、変数 statement を使用してテンプレートを作成します。このテンプレートは、変数を true に設定した場合にステートメントが true であることを示すコンテンツを表示します。

変数を false に設定した場合、ステートメントは false と表示されます。

# angular
<hello name="{{ name }}"></hello>
<h2>{{ statement ? 'This statement is True' : 'This statement is false' }}</h2>

アプリケーションをテストして、値ステートメントを変更したときに機能するかどうかを確認しましょう。

出力：

ステートメントの値を変更し、それを true に設定して、それがどのように機能するかを確認します。

出力：

したがって、ご覧のとおり、statement 変数の値を変更すると、コードが実行され、ステートメントの単純なメソッドを使用して、表示したい値が表示されます。

if-else ステートメントが実行される div 内に表示したいブロックを想像してみましょう。 *ng-if ステートメントを使用して、条件が正しいか間違っているときに表示するブロックに ID を設定できます。

新しい変数 element を 1 に設定します。app.component.ts のコードは次のようになります。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  statement = true;
  element = 1;
}

app.component.html にテンプレートを作成します。ブロック trueBlock を表示する*ng-if ステートメントを持つ div があり、element の値が 1 でない場合、falseBlock の ID を持つブロックが表示されます。

<div *ngIf="element == 1; then trueBlock; else falseBlock"></div>

<ng-template #trueBlock><button>Login</button></ng-template>
<ng-template #falseBlock><button>Logout</button></ng-template>

それがどのように機能するかを確認しましょう。

出力：

要素の値を変更して、どのように機能するかを確認してください。

# angular
element = 2;

出力：

上記の例でわかるように、*ng-if ステートメントを使用してブロックの ID を呼び出すことで、コードのブロックを簡単に表示できます。