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>代码中没有覆盖hidden行为的显示css规则，如：

p {
  display: inline-block !important;
}

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

Answer 2

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

Answer 3

只需添加以下代码：

p[hidden] { display: none; }

到您的styles.css文件。

Answer 4

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

希望它可以帮到你，亨利

Answer 5

作为替代方案，请使用：

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

Answer 6

如果你去dom，你可以看到隐藏的这种风格

p[attributes Style]
{
   display: none;
}

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

http://www.talkingdotnet.com/dont-use-hidden-attribute-angularjs-2/

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

6 个答案: