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

用AngularJS写

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

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


当前回答

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

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

其他回答

抱歉,我不同意将绑定为hidden,因为在使用Angular 2时,它被认为是不安全的。这是因为隐藏样式可以很容易地覆盖,例如使用

display: flex;

建议使用*ngIf,这样更安全。更多细节,请参考Angular官方博客。使用Angular 2要避免的5个新手错误

<div *ngIf="showGreeting">
   Hello, there!
</div>

[隐藏]= " yourVariable " 或 [style.display] = " ! isShow ?'block': 'none'"

使用[hidden]属性:

[hidden]="!myVar"

或者你可以使用*ngIf

*ngIf="myVar"

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

使用hidden,就像你用控件绑定任何模型一样,并为它指定css:

HTML:

<input type="button" class="view form-control" value="View" [hidden]="true" />

CSS:

[hidden] {
   display: none;
}

对我来说,[隐藏]=!瓦尔从来没有成功过。

因此,<div *ngIf="expression" style="display:none;" >

<div *ngIf="expression">总是给出正确的结果。