Javascript 角度隐藏忽略

我试图在Angular2中使用Hidden属性，当我包含改变DIV显示的样式时，隐藏属性将被忽略

运行下面的代码时，将显示两个div。 当我删除class.displayInline时，第一个DIV被隐藏，第二个DIV被显示（如预期的那样）

我可以同时使用隐藏和显示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);

从'angular2/angular2'导入{ComponentAnnotation作为组件，ViewAnnotation作为视图，引导，NgIf}；
@组成部分({
选择器：“你好”
})
@看法({
模板：`.displayInline{display:inline}你好，{{name}！
应该隐藏起来。
应该显示。
`,
指令：[NgIf]
})
出口类你好{
名称：string='World'；
构造函数（）{
设置超时（（）=>{
this.name=‘新世界’
}, 2000);
}
hideDiv1（）{
返回true；
}   
hideDiv2（）{
返回false；
}
}
引导（你好）；

存储库：

注意：

的默认值为“display:inline”，您可能希望改用它们

当前类覆盖[隐藏]。我同意，这不如ng hide/ng show有效，我希望它在angular2的未来版本中得到修复。目前是

您可以通过简单地用类包装[hidden]元素来克服这个问题

<span class="someClass">
  <span [hidden]="hideDiv1()">should be hidden.</span>
</span>

应该隐藏起来。

如果需要对可见性进行更精细的控制，可以使用

样式。显示
而不是
隐藏

<div [style.display]="active?'inherit':'none'"></div>

我在btn引导类中遇到了类似的问题

<button [hidden]="!visible" class="btn btn-primary">Click</button>

在css样式表的末尾，我全局使用。
这就解决了目前的问题。
这很好，但取决于具体情况。在我的例子中，它没有工作，因为它被重写了。您可以使用
display:none！重要的
still当div有一个需要启动的嵌套组件时，这一个非常适合有效地替换*ngIf=“active”。引用的问题已经解决，我怀疑它已经被一些
aria隐藏的
工作卷起。我要求澄清。请参阅。它可以工作，但如果我们在
表的
tr
中写入
span
标记，它会打断表行。如何修复此问题？请参见
[hidden] {
  display: none;
}