~Linux、MySQLからAJAXまでAngular2でNgIf、[style.display]、[hidden]を使って表示、非表示を切り替えAngular2のNgIfディレクティブ、スタイルバインディング([style.display])、プロパティバインディング([hidden])を使って、指定したHTML要素を表示、非表示の切替えを行う事が出来ます。※Angular2の2.0.0版、TypeScriptを使って確認したものです。(デモはv4.4.3、v2.0.0で動作確認)※目次をクリックすると目次の下部にコンテンツが表示されます。"condition"がtrueの場合、表示。"condition"がtrueの場合、非表示。</p>・NgIf=”condition”のconditionがtrueの場合は、<p>~</p>のHTML要素をDOMに追加し、falseの場合はDOMから削除する事によって、表示、非表示を切替える事が出来る。・NgIfのコンポーネントもdestroyし、イベントリッスン、変更検知も必要なくなるのでリソースの消費は少なくなる。追加する事になった場合は、コンポーネントとそのサブツリーを再生成し、初期化する必要があるので高コストの処理となる。[style.display]、[hidden]・要素はDOM内に残したまま非表示にしている。再度表示する場合は高速に実行できる。1)[style.display](スタイルバインディング)・cssのdisplay:noneを使用する。"display:none"のcss設定で非表示</p>2)[hidden](プロパティバインディング)・HTML要素のhidden属性を使用する。"condition"がtrueの場合、非表示。"condition"がtrueの場合、表示。</p>コンポーネント内の属性値に応じて表示、非表示を切替える下記デモでは、コンポーネント内のage_vとaddress_vのtrue/falseの設定に応じて各メンバーの住所、年齢の表示、非表示を切替えています。この例では詳細表示部分の1行目の年齢を下記のようにCSSの設定を行っています。bold}NgIfディレクティブを使用すると年齢部分のHTML要素が削除され、住所部分の要素が1行目となってしまい、住所が太字表示となってしまいます。この例では、年齢部分を太字表示にしようとしているので、NgIfディレクティブではなく、[style.display]、[hidden]を使用する必要があります。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。