我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
当前回答
如果你正在使用Bootstrap是这样简单:
<div [class.hidden]="myBooleanValue"></div>
其他回答
这对我来说很管用:
<div [style.visibility]="showThis ? 'visible' : 'hidden'">blah</div>
<div [hidden]="myExpression">
myExpression可以设置为true或false
<div [hidden]="flagValue">
---content---
</div>
使用hidden,就像你用控件绑定任何模型一样,并为它指定css:
HTML:
<input type="button" class="view form-control" value="View" [hidden]="true" />
CSS:
[hidden] {
display: 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+的方法