我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
当前回答
我的问题是显示/隐藏一个垫子的按钮点击使用 < ng-container * ngIf = " myvar# " >。表的“加载”非常慢,在2-3秒内有300条记录。
数据是使用ngOnInit()中的订阅来加载的,并且可以在模板中使用,但是随着行数的增加,模板中表的“加载”变得越来越慢。
我的解决方案是将*ngIf替换为:
< div[风格。显示]= " activeSelected吗?'block': 'none'">
. 现在,当单击按钮时,表立即加载。
其他回答
使用hidden,就像你用控件绑定任何模型一样,并为它指定css:
HTML:
<input type="button" class="view form-control" value="View" [hidden]="true" />
CSS:
[hidden] {
display: none;
}
这对我来说很管用:
<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>
我发现自己处于相同的情况,与我的情况不同,元素是一个伸缩容器。如果不是你的情况,一个简单的工作可以
[style.display]="!isLoading ? 'block' : 'none'"
在我的例子中,由于我们支持的许多浏览器仍然需要供应商前缀来避免问题,我选择了另一种简单的解决方案
[class.is-loading]="isLoading"
哪里的CSS是简单的
&.is-loading { display: none }
将显示的状态留给默认类处理。
在引导4.0中,类"d-none" = "display: none!important;"
<div [ngClass]="{'d-none': exp}"> </div>
使用[ngStyle]
[ngStyle]="{'visibility': my-flag ? 'visible' : 'hidden'}"