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

我的组件是这样定义的：

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>

。。。

...


...

...

---

看起来很直接，但出于某种原因，它显示了所有的部分。。。我遗漏了什么？

事实上，要隐藏利用HTML5

hidden

属性的元素，表达式必须返回值

true

。在这种情况下，该属性将出现在内存中的DOM中。当值为

false

时，属性不存在，元素可见

希望它能帮助你，

---

Thierry

检查您的

标记上是否没有任何会覆盖

隐藏的
行为的显示css规则，如：

p {
  display: inline-block !important;
}

因为
hidden
html属性的行为类似于
display:none
如果
display:none
属性为override，则使用
*ngIf=“false”
如果转到dom，则可以看到hidden创建此样式

p[attributes Style]
{
   display: none;
}  

这会影响所有p元素，您可以在这里看到如何工作：

只需添加以下代码：

p[hidden] { display: none; }

到您的
style.css
文件。
也可以使用以下选项：

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

是否已检查是否已将隐藏属性添加到DOM中的元素？（在devtools中）是的，它是。。。。我也发现了我的错误。。。
布尔数组
需要将其值反转。。。duhI don't get your point@MarkRajcok，angular2根据以下语法表达式添加或删除
hidden
html属性。我的回答是关于一个与角度无关的误差。这是关于它的行为，它可以被css规则覆盖。对不起，我读你的答案太快了。。。我想我读过“一定要有”而不是“一定不要有”。。。我的错误。我删除了我的评论。无需指定“！important”，因为[hidden]规则仅为“display:none”。所以，如果你有任何机会，为css中的显示定义一个更强大的规则，它将不起作用。！重要的不应该是一个解决方案隐藏它不同于*ngIf。[隐藏]只隐藏一个元素，而不是每次表达式设置为true时重新创建一个元素。所以它更昂贵，不应该被用来代替。你现在应该在哪里使用一个或另一个。为了避免css不必要的行为，建议使用ngIf而不是隐藏在这里：（见第一节）伟大的答案！当我不想显示时，这会覆盖元素上的显示样式。