我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
当前回答
使用[hidden]属性:
[hidden]="!myVar"
或者你可以使用*ngIf
*ngIf="myVar"
这是显示/隐藏元素的两种方法。唯一的区别是:*ngIf将从DOM中删除元素,而[hidden]将告诉浏览器使用CSS display属性显示/隐藏元素,将元素保留在DOM中。
其他回答
在Angular文档https://angular.io/guide/structural-directives#why-remove-rather-than-hide上有两个例子
指令可以通过将其显示样式设置为none来隐藏不需要的段落。
<p [style.display]="'block'">
Expression sets display to "block".
This paragraph is visible.
</p>
<p [style.display]="'none'">
Expression sets display to "none".
This paragraph is hidden but still in the DOM.
</p>
你可以使用[style。display]="'block'"来替换ngShow和[style.]display]="'none'"替换ngHide。
如果你正在使用Bootstrap是这样简单:
<div [class.hidden]="myBooleanValue"></div>
[隐藏]= " yourVariable " 或 [style.display] = " ! isShow ?'block': 'none'"
要隐藏和显示div在按钮上单击angular 6。
Html代码
<button (click)="toggleElement()">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf="isShow">
<table>
<tr>
<td>Name</td>
<td>Ram</td>
</tr>
</table>
</div>
AppComponent。ts代码
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
isShow=false;
toggleElement():void
{
this.isShow = !this.isShow
}
}
这适用于我,它是一种替代ng-hide和ng-show在angular2+的方法
在引导4.0中,类"d-none" = "display: none!important;"
<div [ngClass]="{'d-none': exp}"> </div>