Angular で ngIf Else を使用する

1. Angular のスタンドアロン関数として*ngIf を使用する
2. else で*ngIf を使用する
3. Angular で*ngIf と else および then ステートメントを使用する

開発者として Web アプリケーションを構築するときは、ページをその場で調整するように Web アプリを設定する必要があります。*ngIf ステートメントが便利になります。*ngIf は、ページにレンダリングされた HTTP 要素を操作するために使用されます。

これは、いくつかのパラメーターが設定された後、Web アプリに特定の機能を実行するように指示する条件で機能します。そして、そのようなパラメータが設定されていない場合は、代わりに別の種類を実行する必要があります。

*ngIf のみを使用していくつかの機能を実行します。次に、*ngIf と else ステートメントを組み合わせて、何が可能かを確認します。最後に、*ngIf else then の組み合わせを使用して HTTP 要素を操作します。

Angular のスタンドアロン関数として*ngIf を使用する

したがって、ここでは、true または false 条件と一緒に*ngIf ステートメントを使用します。

すべての作業は app.component.html で行います。

<h1>*ngIf in Angular</h1>
<h2 *ngIf="true">
  Hi, Youtube
</h2>

*ngIf 条件が true に設定されている場合、Web ページには Hi, Youtube と表示されます。false に変更すると、Hi, Youtube が Web ページから消えます。

次のように、app.component.ts を介して関数を渡すこともできます。

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  displayMe=true;
}

次に、*ngIf の値を次のように displayMe に変更します。

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe">
  Hi, Youtube
</h2>

最初の例と同じように、基本的なルールは同じように機能します。

else で*ngIf を使用する

*ngIf 条件を else ステートメントと組み合わせると、任意の時点で Web ページに表示するコンテンツを決定するのに役立ちます。

この方法では、ng-template タグ内の Hi, Youtube に表示する他のステートメントをネストする必要があります。

app.component.html は次のようになります。

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe else elseBlock">
  Hi, Youtube
</h2>
<ng-template #elseBlock>
<h2>
    Hi, Twitter
    </h2>
</ng-template>

*ngIf 条件と一緒に else ステートメントを使用したことに気付くでしょう。これにより、Web ページのコンテンツをより適切に制御できるようになります。

したがって、app.component.ts では、displayMe が真の値になると、Hi, Youtube が表示されます。false の場合、Hi, Twitter が表示されます。

Angular で*ngIf と else および then ステートメントを使用する

前の例では、else ステートメントと一緒に機能する ng-template を紹介しました。*ngIf および else とともに使用する場合、then ステートメントを使用すると、ng-template 内のコンテンツを操作できます。

これは、構造化され、適切に配置されたコードファイルを保持したいコーダーにとって歓迎すべきソリューションです。

app.component.html は次のように構成されます。

<h1>*ngIf in ANgular</h1>
<h2 *ngIf="displayMe; then ifBlock else elseBlock">
  Hi, Youtube
</h2>
<ng-template #ifBlock>
<h2>
    Hi, Google
    </h2>
</ng-template>
<ng-template #elseBlock>
<h2>
    Hi, Twitter
    </h2>
</ng-template>

したがって、app.component.ts では、displayMe が真の値の場合は Hi, Google が表示され、偽の値の場合は Hi, Twitter が表示されます。