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

用AngularJS写

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

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


当前回答

根据ngShow和ngHide的Angular 1文档,这两个指令都会根据指令的条件为元素添加css样式display: none !important;(对于ngShow,为false值添加css,而对于ngHide,为true值添加css)。

我们可以使用Angular 2的ngClass指令来实现这个行为:

/* style.css */
.hide 
{
    display: none !important;
}

<!-- old angular1 ngShow -->
<div ng-show="ngShowVal"> I'm Angular1 ngShow... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div>

<!-- old angular1 ngHide -->
<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>

注意,对于Angular2中的show行为,我们需要添加!(不是)在ngShowVal之前,对于Angular2中的hide行为,我们不需要添加!(不是)在ngHideVal之前。

其他回答

使用[ngStyle]

[ngStyle]="{'visibility': my-flag ? 'visible' : 'hidden'}"

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

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

这个答案是为那些不知道如何隐藏一个元素,从.ts文件可见

TS文件

实现OnInit { isHidden:boolean = false; 隐藏(){ 这一点。isHidden = true; } 取消隐藏(){ 这一点。isHidden = false; } }

HTML文件

< div[隐藏]=“isHidden >的< / div > <巴顿(click) =“hide ()“巴顿>隐藏< / > <巴顿(click) =“unHide ()“巴顿> UnHide < - >

如果你的情况是样式为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";
}

使用[hidden]属性:

[hidden]="!myVar"

或者你可以使用*ngIf

*ngIf="myVar"

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