[解決済み] Angular 2+でngShowとngHideに相当するものは何ですか？

質問

特定の条件下で表示させたい要素がいくつかあるのですが、どうすればいいですか？

AngularJSでは、次のように記述します。

<div ng-show="myVar">stuff</div>

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

どのように解決するのですか？

その hidden プロパティはそのために使用できます

[hidden]="!myVar"

こちらもご覧ください

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

課題

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 を指定するか、またはその属性を削除すると、実際にその要素が有効になります。 を表示します。

使用方法 {{}} も式を文字列に変換してしまい、期待通りに動作しません。

とのバインディングのみ [] が期待通りに動作するのは、この false として割り当てられています。 false ではなく "false" .

*ngIf 対 [hidden]

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