ngIfと* NGIFの違いは何ですか？
質問者：Dorina Kleinmaier |最終更新日：2020年2月5日
カテゴリ：テクノロジーとコンピューティングのWebデザインとHTML
角度のあるngIfディレクティブとhiddenまたはdisplay：noneの主な違いは、 ngIfが条件または式に基づいて要素をDOMに追加またはDOMから削除することです。 ngIf vs非表示、またはAngularで何も表示しません。
| ngIf | 非表示または表示なし |
|---|---|
| ngIfがfalseと評価された場合、DOM要素は追加されません。 | DOM要素がHTMLに追加されます |
概要。 ngIfディレクティブは、{expression}に基づいてDOMツリーの一部を削除または再作成します。 ngIfに割り当てられた式がfalse値と評価された場合、要素はDOMから削除されます。そうでない場合、要素のクローンがDOMに再挿入されます。
同様に、ngIfとNg showの違いは何ですか？どちらも同じように機能しますが、主な違いは、 ngifを使用する場合、要素はngifの条件がtrueの場合にのみDOMに追加され、それ以外の場合はDOMから削除されることです。一方、ngの-表示/非表示は、HTMLページ上の表示または非表示の要素にCSSのdisplayプロパティを使用しています。 DOMから要素を削除することはありません。
では、なぜ*がngIfで使用されるのでしょうか。
5つの答え。アスタリスク構文は、ディレクティブが内部で拡張される、より単語の多いテンプレート構文のシンタックスシュガーです。これらのオプションはどれでも自由に使用できます。アスタリスクは「シンタックスシュガー」です。これにより、ライターとリーダーの両方のngIfとngForが簡略化されます。
ngIfをどのように使用しますか？
NgIfを使用するには、接頭辞としてアスタリスク（*）を* ngIfとして付ける必要があります。 CSSの可視性プロパティを使用して要素サブツリーを非表示および表示することは、 NgIfによって実行される作業と同じではありません。 CSSの可視性プロパティはDOMから要素サブツリーを削除しませんが、 NgIfは式の値が誤っているために要素サブツリーをDOMから削除します。
29関連する質問の回答が見つかりました
ngIfとngForを一緒に使用できますか？
ホスト要素リンクごとに1つの構造ディレクティブ
あなたは、同じホスト要素に* ngForと* ngIfの両方を入れてみます。 Angularはあなたを許可しません。要素に適用できる構造ディレクティブは1つだけです。このユースケースのための簡単な解決策があります：* ngFor要素をラップコンテナ要素に* ngIfを置きます。 ngIfをどのようにテストしますか？
ngIfを使用する場合、angularはノードをマークアップから完全に削除します。したがって、この要素が存在しないことを確認する必要があります。ドキュメントによると： ngIfは式を評価し、式がそれぞれ真または偽の場合に、thenまたはelseテンプレートをその場所にレンダリングします。
ng Ifは新しいスコープを作成しますか？
Ng -DOMノードを追加および削除するときに新しい子スコープを作成する場合。新しい子スコープは、親スコープから継承します。何かが子スコープに存在しないのであれば、それは、親がそれを持っているかどうかを確認するために継承チェーンを上に移動します。
角度のあるDomとは何ですか？
DOMはDocumentObjectModelの略です。 AngularJSのディレクティブは、アプリケーションデータをHTMLDOM要素の属性にバインドするために使用されます。ディレクティブは–1です。
角度の* ngForとは何ですか？
* AngularのngForディレクティブ。 NgForは組み込みのテンプレートディレクティブであり、配列やオブジェクトなどを簡単に反復処理して、各アイテムのテンプレートを作成できます。ユーザーの数は、コンポーネントで使用可能にする必要がある反復可能なユーザーを反復処理することを意味します。
角度のあるngテンプレートとは何ですか？
NG -テンプレートはHTMLテンプレートをレンダリングするために使用される角度の要素です。私たちは、ngの使用-角度* ngIfディレクティブでテンプレートは他のテンプレートを表示します。出力が表示される場合は、 ngのみが表示されます-div要素にあるテンプレートが機能します。そして、生成されたHTMLソースコードを見てください。
AngularJSは双方向バインディングにどのような手法を使用しますか？
AngularJSアプリに結合DATA-は、モデルとビューのコンポーネント間のデータの自動同期です。 AngularJSがデータバインディングを実装する方法により、モデルをアプリケーションの信頼できる唯一の情報源として扱うことができます。ビューは常にモデルの投影です。
ngSwitchとは何ですか？
概要。 ngSwitchディレクティブは、スコープ式に基づいてテンプレートのDOM構造を条件付きで交換するために使用されます。 ngSwitch内で、ngSwitchWhenまたはngSwitchDefaultディレクティブがない要素は、テンプレートで指定された場所に保持されます。
NgForとngIfとは何ですか？
* ngIf 、* ngFor 、および* ngSwitchCaseのような*が前に付いたディレクティブは構造ディレクティブです。構造ディレクティブは、特定の要素を追加または削除することによってDOMを変更します。要素が削除されると、単に非表示になるのではなく、完全に削除されます。
NgTemplateOutletとは何ですか？
NgTemplateOutletは、TemplateRefとコンテキストを取得し、提供されたコンテキストでEmbeddedViewRefをスタンプアウトするディレクティブです。テンプレートでlet-{{templateVariableName}} =” contextProperty”属性を介してコンテキストにアクセスし、テンプレートが使用できる変数を作成します。
角度のあるモジュールとは何ですか？
Angularでは、モジュールは、他のモジュールと組み合わせてアプリケーションを作成できるように、関連するコンポーネント、ディレクティブ、パイプ、およびサービスをグループ化するメカニズムです。 Angularアプリケーションは、全体像を見ることができるように各ピース（または各モジュール）が必要なパズルと考えることができます。
AngularJSでのNGビューの使用は何ですか？
ngViewは、現在のルートのレンダリングされたテンプレートをメインレイアウト（ index。html ）ファイルに含めることにより、$ routeサービスを補完するディレクティブです。現在のルートが変更されるたびに、含まれるビューは$ routeサービスの構成に従って変更されます。
NGショーとNGショーのどちらが良いですか？
1）あなたのページは用途がNGというトグルがある場合- ngの/場合-ショーを表示/非表示のものに、ngの-もし原因がより多くのブラウザの遅延（遅い）のを。たとえば：あなたはngの、二つのビューを切り替えるために使用されるボタンを使用している場合-ショーは速いと思われます。 2）ngの-それは真/偽のと評価された場合にスコープを破壊する/作成するかどうか。
AngularJSで$ scopeが使用されるのはなぜですか？
このスコープオブジェクトは、 AngularJSコントローラーで定義された変数と関数、およびディレクティブのコントローラーとリンク関数にアクセスするために使用されます。 DDO（データ定義オブジェクト）のスコープフィールドを使用して、ディレクティブのデフォルトスコープを変更できます。
角度の@componentと@directiveの違いは何ですか？
Componentは、シャドウDOMを使用して、 componentsと呼ばれるカプセル化された視覚的な動作を作成するディレクティブです。コンポーネントは通常、UIウィジェットを作成するために使用されます。ディレクティブは、既存のDOM要素に動作を追加するために使用されます。コンポーネントは、アプリケーションをより小さなコンポーネントに分割するために使用されます。
どのタイプのコンポーネントでカスタムディレクティブを作成できますか？
カスタムディレクティブは、任意のタイプのコンポーネントで作成できます。次のリストでは、いくつかの例について説明します。スコープと追加機能に基づいて一括htmlタグとsvgタグをレンダリングするには、スコープ値を入力として使用するカスタムディレクティブとして記述できます。