Angular 2 [隐藏]似乎不起作用？

Question

我的组件以这种方式定义:

import { Component } from 'angular2/core'

@Component({
    selector: 'sidebar',
    templateUrl: 'js/app/views/sidebar.html',
})
export class SidebarComponent {
    public sections: boolean[] = [
        true,
        false,
        false,
        false,
        false,
        false,
        false,
        false
    ];
}

该sidebar.html模板:

<h3 class="proofTitle">...</h3>
<p [hidden]="sections[0]">
    ...
</p>
<p [hidden]="sections[1]">
    ...
</p>
...
<p [hidden]="sections[7]">
    ...
</p>

看起来非常直接,但出于某种原因,它显示了所有部分......我错过了什么？

Answer 1

请确保您的<p>代码上没有显示css规则,这些规则会覆盖以下hidden行为:

p {
  display: inline-block !important;
}

因为hiddenhtml属性就像display: none

Answer 2

只需添加此代码:

p[hidden] { display: none; }

到你的styles.css文件.

Answer 3

如果display: none属性覆盖使用*ngIf="false"

Answer 4

作为替代方案,使用此:

[style.display]="sections[i] ? 'none' : 'block'"

Answer 5

实际上,要隐藏利用HTML5 hidden属性的元素,true必须由表达式返回值.在这种情况下,该属性将出现在内存中的DOM中.值为时false,该属性不存在且元素可见.

希望它对你有帮助,蒂埃里