我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
当前回答
处理这个问题的最好方法是使用ngIf 因为这会阻止元素在前端渲染,
如果你使用[hidden]="true"或style hide [style. "它将只隐藏在前端的元素,并且人们可以更改它的值并轻松查看它, 在我看来,最好的隐藏元素的方法是ngIf
<div *ngIf="myVar">stuff</div>
如果你有多个元素(需要实现else also),你可以使用<ng-template>选项
<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
<div>loadMenu</div>
</ng-template>
<ng-template #loadAdmin>
<div>loadAdmin</div>
</ng-template>
ng模板示例代码
其他回答
对我来说,[隐藏]=!瓦尔从来没有成功过。
因此,<div *ngIf="expression" style="display:none;" >
<div *ngIf="expression">总是给出正确的结果。
使用[hidden]属性:
[hidden]="!myVar"
或者你可以使用*ngIf
*ngIf="myVar"
这是显示/隐藏元素的两种方法。唯一的区别是:*ngIf将从DOM中删除元素,而[hidden]将告诉浏览器使用CSS display属性显示/隐藏元素,将元素保留在DOM中。
[隐藏]= " yourVariable " 或 [style.display] = " ! isShow ?'block': 'none'"
对于其他无意中遇到这个问题的人来说,这就是我如何做到的。
import {Directive, ElementRef, Input, OnChanges, Renderer2} from "@angular/core";
@Directive({
selector: '[hide]'
})
export class HideDirective implements OnChanges {
@Input() hide: boolean;
constructor(private renderer: Renderer2, private elRef: ElementRef) {}
ngOnChanges() {
if (this.hide) {
this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'hidden');
} else {
this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'visible');
}
}
}
我使用“可见性”是因为我想保留元素所占据的空间。如果你不希望这样做,你可以使用'display'并将其设置为'none';
你可以将它绑定到你的html元素,动态的或者非动态的。
<span hide="true"></span>
or
<span [hide]="anyBooleanExpression"></span>
要隐藏和显示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+的方法