Javascript Angular 隐藏忽略
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30744882/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular Hidden Ignores
提问by Albi
I am trying to use the Hidden property in Angular2 and when I include a style that alters the display of the DIV, the hidden property is ignored.
我正在尝试在 Angular2 中使用 Hidden 属性，当我包含改变 DIV 显示的样式时，隐藏属性将被忽略。
When the code below is run, both divs are displayed. When I remove the class .displayInline the first DIV is hidden and the second is displayed (as expected).
当下面的代码运行时，两个 div 都会显示。当我删除类 .displayInline 时，第一个 DIV 被隐藏，第二个被显示（如预期）。
Can I use Hidden and the display CSS together?
我可以同时使用 Hidden 和 display CSS 吗？
import {ComponentAnnotation as Component, ViewAnnotation as View, bootstrap, NgIf} from 'angular2/angular2';
@Component({
selector: 'hello'
})
@View({
template: `<style>.displayInline{ display:inline }</style><span *ng-if="name">Hello, {{name}}!</span>
<div>
<div [hidden]="hideDiv1()" class="displayInline">should be hidden.</div>
<div [hidden]="hideDiv2()" class="displayInline">should be displayed.</div>
</div>`,
directives: [NgIf]
})
export class Hello {
name: string = 'World';
constructor() {
setTimeout(() => {
this.name = 'NEW World'
}, 2000);
}
hideDiv1(){
return true;
}
hideDiv2(){
return false;
}
}
bootstrap(Hello);
Repository:https://github.com/albi000/ng2-play
采纳答案by shmck
Note: <span>'s default to "display: inline", you may want to use them instead.
注意：<span>默认为 "display: inline"，你可能想改用它们。
Currently classes override [hidden]. I agree, this isn't as effective as ng-hide/ng-show and I hope it is fixed in future versions of angular2. It is currently an open on issue on the Angular2 repo.
当前类覆盖 [hidden]。我同意，这不如 ng-hide/ng-show 有效，我希望它在 angular2 的未来版本中得到修复。它目前是 Angular2 repo 上的一个公开问题。
You can overcome the problem by simply wrapping your [hidden] element with the class.
您可以通过简单地用类包装 [hidden] 元素来解决这个问题。
<span class="someClass">
<span [hidden]="hideDiv1()">should be hidden.</span>
</span>
回答by Gaurav Mukherjee
I faced similar problem with btn class of bootstrap
我在 btn 类的引导程序中遇到了类似的问题
<button [hidden]="!visible" class="btn btn-primary">Click</button>
I solved this by adding
我通过添加解决了这个问题
[hidden] {
display: none;
}
at the end of css stylesheet I use globally. This is solved the problem for now.
在我全局使用的 css 样式表的末尾。暂时解决了这个问题。
回答by justind
You can use style.displayinstead of hiddenif you need more fine-grained control over visibility.
如果您需要对可见性进行更细粒度的控制style.display，hidden则可以使用代替。
<div [style.display]="active?'inherit':'none'"></div>
