我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
当前回答
要隐藏和显示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+的方法
其他回答
要隐藏和显示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+的方法
<div [hidden]="myExpression">
myExpression可以设置为true或false
在引导4.0中,类"d-none" = "display: none!important;"
<div [ngClass]="{'d-none': exp}"> </div>
抱歉,我不同意将绑定为hidden,因为在使用Angular 2时,它被认为是不安全的。这是因为隐藏样式可以很容易地覆盖,例如使用
display: flex;
建议使用*ngIf,这样更安全。更多细节,请参考Angular官方博客。使用Angular 2要避免的5个新手错误
<div *ngIf="showGreeting">
Hello, there!
</div>
你有两个选择:
第一个选项
[style.display]="!isShow ? 'block' : 'none'"
第二个选项
myvariable可以是布尔值
[hidden]="!myVarible"