Ответ 1
Убедитесь, что на тэгах <p>
не отображается правило CSS css, которое переопределяет поведение hidden
, например:
p {
display: inline-block !important;
}
Поскольку атрибут hidden
html действует как display: none
Мой компонент определяется следующим образом:
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>
Кажется довольно прямолинейным, но по какой-то причине он показывает все разделы... что мне не хватает?
Убедитесь, что на тэгах <p>
не отображается правило CSS css, которое переопределяет поведение hidden
, например:
p {
display: inline-block !important;
}
Поскольку атрибут hidden
html действует как display: none
Если свойство display: none
переопределяет использование *ngIf="false"
Фактически, чтобы скрыть элементы, использующие атрибут HTML5 hidden
, ваше выражение должно быть возвращено значение true
. В этом случае атрибут будет присутствовать в вашей DOM в памяти. Когда значение false
, атрибут отсутствует и элемент видим.
Надеюсь, это поможет вам, Thierry
Просто добавьте этот код:
p[hidden] { display: none; }
в ваш styles.css
файл.
если вы перейдете в dom, вы увидите, что скрытые делают этот стиль
p[attributes Style]
{
display: none;
}
и это влияет на весь элемент p, вы можете увидеть, как работать здесь:
http://www.talkingdotnet.com/dont-use-hidden-attribute-angularjs-2/
В качестве альтернативы используйте это:
[style.display]="sections[i] ? 'none' : 'block'"