Angular 隐藏忽略

Question

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

当下面的代码是运行时，两个div都会显示。当我删除 class .displayInline 时，第一个 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);

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

Answer 1

注意：<span> 的默认值为 "display: inline"，您可能需要使用它们。

目前class覆盖[隐藏]。我同意，这不如 ng-hide/ng-show 有效，我希望它在未来的 angular2 版本中得到修复。目前是an open on issue on the Angular2 repo。

您可以通过简单地用 class 包裹 [hidden] 元素来解决这个问题。

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

Answer 2

如果您需要对可见性进行更精细的控制，您可以使用 style.display 而不是 hidden。

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

Answer 3

我遇到了与 bootstrap

的 btn class 类似的问题

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

我通过添加

解决了这个问题

[hidden] {
  display: none;
}

在我全局使用的 css 样式表的末尾。至此问题暂时解决。

Angular 隐藏忽略

Angular Hidden Ignores

javascript

angular