Angular で ngIf Else を使用する
![Angular で ngIf Else を使用する](/img/Angular/ag-feature-image---use-ngIf-else-on-angular.webp)
開発者として 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
が表示されます。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn