HOWTO · Angular
Angular 2 の ngIf の概念
ngIf ディレクティブは式を評価し、true と評価された場合は特定の要素をレンダリングし、そうでない場合はその要素をまったくレンダリングしません。
Angular 2 では、ngIf ディレクティブは Angular 2 で最も簡単で便利なディレクティブの 1つです。これは、式の評価に基づいて HTML 要素を条件付きで表示または非表示にするために使用されます。
ngIf ディレクティブは式を評価し、true と評価された場合、指定された要素をレンダリングします。そうでない場合、その要素はまったくレンダリングされません。
このディレクティブは、複数のビューが共通の特性を共有する場合に DOM 要素の数を減らすのに役立ちます。
この記事では、ngIf についてすべて説明します。
CSS でコンポーネントを非表示にする vs.Angular 2 で ngIf
HTML には if ステートメントがありませんが、CSS の show 属性と visibility 属性を使用してページのセクションを非表示にすることができます。
JavaScript を使用して、HTML 要素に CSS プロパティを追加または削除したり、ページから要素を非表示にしたりできます。ただし、これは ngIf と同じではありません。
要素が ngIf で非表示になっている場合、その要素はページに存在しません。
Chrome Dev Tools を使用してページを調査する場合、DOM に HTML 要素は表示されません。
Angular 2 の ngIf の式
ngIf ディレクティブは、ブール値だけでなく、有効な Typescript フレーズを入力として受け入れます。次に、表現の完全性を評価して、要素を表示するかどうかを決定します。
ブール値に加えて、テキスト、配列、およびオブジェクトを ngIf に送信する場合もあります。
Angular 2 で ngIf を使用する手順
Angular 2 で ngIf を使用するには、次の手順に従う必要があります。
-
true または false として評価される式を記述します。
-
式を開き括弧と閉じ括弧でラップします（例：
(true || false)）。 -
パイプ文字を追加
|開き括弧と閉じ括弧の間。 -
手順 1 の式を使用して、テンプレートに
ngIfディレクティブを追加します。
例：
Angular 2 の ng-if の完全な例について説明しましょう。
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template:
`<h1 *ngIf=" 34< 100" >I'm Adil</h1>
<h1 *ngIf="3>1" > I'm John</h1>
<h1 *ngIf="46<200" >I'm Steven</h1>`,
})
export class AppComponent {
}
上記のコードのライブデモを確認するには、ここををクリックしてください。
