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

Question

このhidden物件はそのために利用できる

[hidden]="!myVar"

参照

問題

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

詳しくsomeはこちらプランカーの例スタイルがあるので隠れない

:host {display: block;}

設定します。(他のブラウザでは動作が異なる場合があります。Chrome 50 でテストしました)

回避策

修正するには、

[hidden] { display: none !important;}

グローバルスタイルへindex.html。

もう一つの落とし穴

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

は同じです

hidden="true"

要素は表示されません。

hidden="false""false"真とみなされる文字列を割り当てます。
値falseまたは属性の削除によってのみ、要素が実際に表示されます。

を使用すると{{}}、式が文字列に変換され、期待どおりに動作しなくなります。

の代わりにとして割り当てられるため、とのバインディングのみが[]期待どおりに機能します。falsefalse"false"

*ngIf対[hidden]

*ngIf実質的には DOM からコンテンツを削除しますが、プロパティ[hidden]を変更してdisplayブラウザにコンテンツを表示しないように指示するだけですが、DOM にはコンテンツがまだ含まれています。

Answer 1