Angular 2 [隐藏]似乎不起作用? [英] Angular 2 [hidden] does not seem to be working?

问题描述

我的组件是这样定义的:

My component is defined this way:

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>

似乎很简单，但是由于某些原因，它显示了所有部分...我缺少什么?

Seems pretty straight forward, but for some reason, it's showing all of the sections... what am I missing?

推荐答案

检查您的<p>标记上没有任何 display css规则，该规则会覆盖hidden行为，例如:

Check that you don't have any display css rule on your <p> tags that would override the hidden behavior like:

p {
  display: inline-block !important;
}

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

Because the hidden html attribute behaves like display: none

这篇关于Angular 2 [隐藏]似乎不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！