角度

Angular 2+のngShowとngHideに相当するものは何ですか？



What Is Equivalent Ngshow



この記事の翻訳元： Angular 2+のngShowとngHideに相当するものは何ですか？

特定の条件下で表示したい要素がいくつかあります。 特定の条件下で、私はいくつかの要素を見たいと思います。



AngularJSで私は書くでしょう AngularJSでは、私は書くでしょう

stuff

Angular 2+でこれを行うにはどうすればよいですか？ Angular 2+でこれを行う方法は？



＃1階

参照： https://stackoom.com/question/2PHU3/Angular-のngShowおよびngHideに相当するものは何ですか

＃2階

hiddenにバインドするだけですプロパティ バインドするだけですhidden属性

[hidden]='!myVar'

も参照してください あなたも見てみることができます



問題 問題

hidden displayのCSSと競合する可能性があるため、いくつかの問題があります。プロパティ。 hidden属性CSSの競合に関連している可能性があるためいくつかの問題があります。

方法を見るdisplayに プランカーの例 スタイルがあるので隠されません 見る プランカーの例 非表示にする方法someスタイルがあるのでスタイル

some

セットする。 グループ。 （これは他のブラウザでは動作が異なる場合があります-Chrome 50でテストしました） （これは他のブラウザでは異なる場合があります-Chrome 50でテストしました）

回避策 解決

追加することで修正できます 追加することで修正できます

:host {display: block}

[hidden] { display: none !important} のグローバルスタイルへ。 for index.htmlグローバルスタイル。

別の落とし穴 別の罠

index.html

と同じです と同じ

hidden='false' hidden='{{false}}' hidden='{{isHidden}}' // isHidden = false

要素は表示されません。 また、要素は表示されません。

hidden='true' 文字列hidden='false'を割り当てますこれは真実と見なされます。 'false'本物と見なされる文字列を割り当てますhidden='false' 。
値のみ'false'または、属性を削除すると、実際に要素が表示されます。 実際には、値falseまたは属性を削除して、要素を表示します。

falseを使用するまた、式を文字列に変換し、期待どおりに機能しません。 use {{}}また、式を文字列に変換し、正しく機能しません。

{{}}とのバインドのみこれは[]であるため、期待どおりに機能しますfalseとして割り当てられますfalseの代わりに。 'false'このために期待どおりに機能するようにバインドする[]として割り当てられるfalseの代わりにfalse 。

'false' vs *ngIf [hidden]対*ngIf

[hidden] *ngIfが、そのコンテンツをDOMから効果的に削除します。 [hidden]を変更しますプロパティであり、コンテンツを表示しないようにブラウザに指示するだけですが、DOMにはコンテンツが含まれています。 displayそのコンテンツをDOMから効果的に削除し、*ngIf編集済み[hidden]この属性は、ブラウザーがコンテンツを表示しないことを示すだけですが、DOMにはコンテンツが含まれています。

＃3階

displayを使用します属性： 使用[hidden]属性：

[hidden]

または、[hidden]='!myVar' を使用できます または、*ngIfを使用できます

*ngIf

これらは、要素を表示/非表示にする2つの方法です。 これらは、要素を表示/非表示にする2つの方法です。 唯一の違いは次のとおりです：*ngIf='myVar' *ngIfがDOMから要素を削除しますCSSを使用して要素を表示/非表示にするようにブラウザに指示します[hidden]要素をDOMに保持することによるプロパティ。 唯一の違いは次のとおりです。display要素をDOMから削除し、*ngIf要素をDOMに保持することでCSSを使用するようにブラウザに指示します[hidden]属性を表示/非表示にします。

＃4階

スタイルがdisplaynoneの場合は、ngStyleディレクティブを使用して表示を直接変更することもできます。ブートストラップDropDownの場合、ULはdisplaynoneに設定されています。 スタイルが表示されない状況の場合は、ngStyleコマンドを使用して、表示を直接変更することもできます。これは、BootdropDropDownのULを表示しないように設定するために行いました。

そこで、ULを「手動で」切り替えて表示するためのクリックイベントを作成しました そのため、ULを表示するように「手動で」切り替えるクリックイベントを作成しました

display

次に、コンポーネントにshowDropDown：bool属性があり、毎回切り替えます。intに基づいて、スタイルのdisplayDDLを次のように設定します。 次に、コンポーネントには、毎回切り替えられるshowDropDown：boolプロパティがあり、intに基づいて、以下に示すように、スタイルにdisplayDDLを設定します。

Seleccione una Ubicación
  • {{object.Value}}

＃5階

使用する 隠された あなたがバインドするように モデル 制御と指定 css それのための： 使用する 隠された あなたがするように モデル コントロールにバインドして割り当てます css 同じ：

HTML： HTML：

showDropDown:boolean displayddl:string manualtoggle(){ this.showDropDown = !this.showDropDown this.displayddl = this.showDropDown ? 'inline' : 'none' }

CSS： CSS：

[hidden] { display: none }

＃6階

|_+_|

myExpressionはtrueまたはfalseに設定できます