角度隐藏忽略 [英] Angular Hidden Ignores

问题描述

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

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.

当运行以下代码，显示两个div。
当我删除类.displayInline时，第一个DIV被隐藏，第二个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).

我可以一起使用隐藏和显示CSS ？

Can I use Hidden and the display CSS together?

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);

存储库： https://github.com/albi000/ng2-play

推荐答案

注意：< span> 默认为display：inline，您可能希望改为使用它们。

Note: <span>'s default to "display: inline", you may want to use them instead.

当前类覆盖[隐藏] ]。我同意，这不如ng-hide / ng-show有效，我希望它在angular2的未来版本中得到修复。目前关于Angular2回购的问题已公开。

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]元素包装在类中来解决问题。

You can overcome the problem by simply wrapping your [hidden] element with the class.

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

这篇关于角度隐藏忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！