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

用AngularJS写

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

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


当前回答

这对我来说很管用:

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

其他回答

这对我来说很管用:

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

我发现自己处于相同的情况,与我的情况不同,元素是一个伸缩容器。如果不是你的情况,一个简单的工作可以

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

在我的例子中,由于我们支持的许多浏览器仍然需要供应商前缀来避免问题,我选择了另一种简单的解决方案

[class.is-loading]="isLoading"

哪里的CSS是简单的

&.is-loading { display: none } 

将显示的状态留给默认类处理。

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

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

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

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

. 现在,当单击按钮时,表立即加载。

如果你的情况是样式为display none,你也可以使用ngStyle指令直接修改显示,我这样做是为了一个引导下拉列表,它的UL被设置为display none。

因此,我创建了一个单击事件,用于“手动”切换UL显示

<div class="dropdown">
    <button class="btn btn-default" (click)="manualtoggle()"  id="dropdownMenu1" >
    Seleccione una Ubicación
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" [ngStyle]="{display:displayddl}">
        <li *ngFor="let object of Array" (click)="selectLocation(location)">{{object.Value}}</li>                                
     </ul>
 </div>    

然后在组件上,我有每次切换的showDropDown:bool属性,并基于int设置样式的displayDDL,如下所示

showDropDown:boolean;
displayddl:string;
manualtoggle(){
    this.showDropDown = !this.showDropDown;
    this.displayddl = this.showDropDown ? "inline" : "none";
}

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

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