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

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

用AngularJS写

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

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

当前回答

我的问题是显示/隐藏一个垫子的按钮点击使用 < ng-container * ngIf = " myvar# " >。表的“加载”非常慢，在2-3秒内有300条记录。

数据是使用ngOnInit()中的订阅来加载的，并且可以在模板中使用，但是随着行数的增加，模板中表的“加载”变得越来越慢。

我的解决方案是将*ngIf替换为:

< div[风格。显示]= " activeSelected吗?'block': 'none'">

．现在，当单击按钮时，表立即加载。

其他回答

<div [hidden]="flagValue">
---content---
</div>

这对我来说很管用:

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

在引导4.0中，类"d-none" = "display: none!important;"

<div [ngClass]="{'d-none': exp}"> </div>

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

HTML:

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

CSS:

[hidden] {
   display: none;
}

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

display: flex;

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

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

推荐文章