我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
我有一些元素,我想在某些条件下是可见的。
用AngularJS写
<div ng-show="myVar">stuff</div>
如何在Angular 2+中做到这一点?
当前回答
我的问题是显示/隐藏一个垫子的按钮点击使用 < ng-container * ngIf = " myvar# " >。表的“加载”非常慢,在2-3秒内有300条记录。
数据是使用ngOnInit()中的订阅来加载的,并且可以在模板中使用,但是随着行数的增加,模板中表的“加载”变得越来越慢。
我的解决方案是将*ngIf替换为:
< div[风格。显示]= " activeSelected吗?'block': 'none'">
. 现在,当单击按钮时,表立即加载。
其他回答
<div [hidden]="flagValue">
---content---
</div>
处理这个问题的最好方法是使用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模板示例代码
这个答案是为那些不知道如何隐藏一个元素,从.ts文件可见
TS文件
实现OnInit { isHidden:boolean = false; 隐藏(){ 这一点。isHidden = true; } 取消隐藏(){ 这一点。isHidden = false; } }
HTML文件
< div[隐藏]=“isHidden >的< / div > <巴顿(click) =“hide ()“巴顿>隐藏< / > <巴顿(click) =“unHide ()“巴顿> UnHide < - >
隐藏属性可以用于此
[hidden]="!myVar"
另请参阅
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
问题
hidden有一些问题,因为它可能与CSS的display属性冲突。
看看Plunker例子中的一些没有被隐藏,因为它有一个样式
:host {display: block;}
集。(这可能在其他浏览器中表现不同-我用Chrome 50测试)
解决方案
你可以通过添加来修正它
[hidden] { display: none !important;}
到index.html中的全局样式。
另一个陷阱
hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;
是一样的
hidden="true"
并且不会显示元素。
Hidden ="false"将分配字符串"false",该字符串被认为是真值。 只有值为false或删除属性才会实际生成元素 可见。
使用{{}}也会将表达式转换为字符串,不会像预期的那样工作。
只有绑定[]才会像预期的那样工作,因为这个false被赋值为false而不是“false”。
*ngIf与[hidden]
*ngIf有效地从DOM中删除了它的内容,而[hidden]修改了display属性,只是指示浏览器不显示内容,但DOM仍然包含它。
你有两个选择:
第一个选项
[style.display]="!isShow ? 'block' : 'none'"
第二个选项
myvariable可以是布尔值
[hidden]="!myVarible"