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模板:

...

    ...


    ...

...

    ...

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

1> bertrandg..：

---

请确保您的

代码上没有显示css规则,这些规则会覆盖以下hidden行为:

p {
  display: inline-block !important;
}

因为hiddenhtml属性就像display: none

2> ranbuch..：

---

只需添加此代码:

p[hidden] { display: none; }

到你的styles.css文件.

3> 小智..：

---

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

---

隐藏它与*ngIf不同.[hidden]只是隐藏一个元素,相反,每次表达式设置为true时,ngIf都会重新创建一个元素.所以它更昂贵,不应该使用它.您现在应该在哪里使用其中一个.

4> Vlad..：

---

作为替代方案,使用此:

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

5> Thierry Temp..：

---

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

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