Angular 2 [hidden] sembra non funzionare?

Question

La mia componente è definita in questo modo:

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 
    ]; 
} 

Il modello sidebar.html:

<h3 class="proofTitle">...</h3> 
<p [hidden]="sections[0]"> 
    ... 
</p> 
<p [hidden]="sections[1]"> 
    ... 
</p> 
... 
<p [hidden]="sections[7]"> 
    ... 
</p> 

sembra abbastanza semplice, ma per qualche ragione, è che mostra tutte le sezioni ... quello che mi manca ?

Answer 1

In effetti, per nascondere gli elementi che utilizzano l'attributo HTML5 hidden, il valore true deve essere restituito dall'espressione. In questo caso, l'attributo sarà presente nel DOM in memoria. Quando il valore è false, l'attributo non è presente e l'elemento è visibile.

Spero che ti aiuta, Thierry

Answer 2

Assicuratevi di non avere una regola CSS display tuoi <p> tag che ignorare hidden comportamento simile:

p { display: inline-block !important; }

Poiché l'attributo hidden html si comporta come display: none

Answer 3

se la proprietà display: none è prioritaria utilizzare *ngIf="false"

Answer 4

se si va a dom si può vedere che fanno nascosto questo stile

p[attributes Style] 
{ 
    display: none; 
} 

e questo influisce su tutti i elemento p, si può vedere come lavorare qui:

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

Answer 5

Proprio aggiungi questo codice:

p[hidden] { display: none; } 

alFile.

Answer 6

In alternativa, utilizzare questo:

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