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>

Кажется довольно прямолинейным, но по какой-то причине он показывает все разделы... что мне не хватает?

Ответ 1

Убедитесь, что на тэгах <p> не отображается правило CSS css, которое переопределяет поведение hidden, например:

p { display: inline-block !important; }

Поскольку атрибут hidden html действует как display: none

Ответ 2

Если свойство display: none переопределяет использование *ngIf="false"

Ответ 3

Фактически, чтобы скрыть элементы, использующие атрибут HTML5 hidden, ваше выражение должно быть возвращено значение true. В этом случае атрибут будет присутствовать в вашей DOM в памяти. Когда значение false, атрибут отсутствует и элемент видим.

Надеюсь, это поможет вам, Thierry

Ответ 4

Просто добавьте этот код:

p[hidden] { display: none; }

в ваш styles.css файл.

Ответ 5

если вы перейдете в dom, вы увидите, что скрытые делают этот стиль

p[attributes Style]
{
   display: none;
}

и это влияет на весь элемент p, вы можете увидеть, как работать здесь:

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

Ответ 6

В качестве альтернативы используйте это:

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