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

因为 hidden html 属性的行为类似于 display: none