在Angular 2+中，ngShow和ngHide的等价物是什么?

我有一些元素，我想在某些条件下是可见的。

用AngularJS写

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

如何在Angular 2+中做到这一点?

当前回答

使用[hidden]属性:

[hidden]="!myVar"

或者你可以使用*ngIf

*ngIf="myVar"

这是显示/隐藏元素的两种方法。唯一的区别是:*ngIf将从DOM中删除元素，而[hidden]将告诉浏览器使用CSS display属性显示/隐藏元素，将元素保留在DOM中。

其他回答

你有两个选择:

第一个选项

[style.display]="!isShow ? 'block' : 'none'"

第二个选项

myvariable可以是布尔值

[hidden]="!myVarible"

<div [hidden]="myExpression">

myExpression可以设置为true或false

如果你正在使用Bootstrap是这样简单:

<div [class.hidden]="myBooleanValue"></div>

使用[ngStyle]

[ngStyle]="{'visibility': my-flag ? 'visible' : 'hidden'}"

这对我来说很管用:

<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>

推荐文章