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

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

用AngularJS写

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

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

当前回答

你有两个选择:

第一个选项

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

第二个选项

myvariable可以是布尔值

[hidden]="!myVarible"

其他回答

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

HTML:

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

CSS:

[hidden] {
   display: none;
}

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

<div [hidden]="myExpression">

myExpression可以设置为true或false

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

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

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

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

display: flex;

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

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

推荐文章