Angular2 Hidden Ignores

Question

Sto cercando di utilizzare la proprietà Hidden in Angular2 e quando includo uno stile che altera la visualizzazione del DIV, la proprietà nascosta viene ignorata.

Quando viene eseguito il codice seguente, vengono visualizzati entrambi i div. Quando rimuovo la classe .displayInline il primo DIV è nascosto e il secondo è visualizzato (come previsto).

Posso utilizzare Hidden e il display CSS insieme?

import {ComponentAnnotation as Component, ViewAnnotation as View, bootstrap, NgIf} from 'angular2/angular2'; 

@Component({ 
    selector: 'hello' 
}) 
@View({ 
    template: `<style>.displayInline{ display:inline }</style><span *ng-if="name">Hello, {{name}}!</span> 
    <div> 
       <div [hidden]="hideDiv1()" class="displayInline">should be hidden.</div> 
       <div [hidden]="hideDiv2()" class="displayInline">should be displayed.</div> 
    </div>`, 
    directives: [NgIf] 
}) 
export class Hello { 
    name: string = 'World'; 
    constructor() { 
     setTimeout(() => { 
      this.name = 'NEW World' 
     }, 2000); 
    } 

    hideDiv1(){ 
     return true; 
    } 

    hideDiv2(){ 
     return false; 
    } 
} 

bootstrap(Hello); 

Repository: https://github.com/albi000/ng2-play

Answer 1

Nota: di default <span> s' a "display: inline", si consiglia di utilizzare loro, invece.

Attualmente le classi eseguono l'override [nascosto]. Sono d'accordo, non è così efficace come ng-hide/ng-show e spero che sia corretto nelle versioni future di angular2. Attualmente è an open on issue on the Angular2 repo.

È possibile superare il problema semplicemente avvolgendo il proprio elemento [nascosto] con la classe.

<span class="someClass"> 
    <span [hidden]="hideDiv1()">should be hidden.</span> 
</span> 

Answer 2

È possibile utilizzare style.display invece di hidden se avete bisogno di un controllo più fine su visibilità.

<div [style.display]="active?'inherit':'none'"></div> 

Answer 3

ho affrontato problema simile con classe btn di bootstrap

<button [hidden]="!visible" class="btn btn-primary">Click</button> 

Ho risolto questo aggiungendo

[hidden] { 
    display: none; 
} 

alla fine del foglio di stile css utilizzo globale. Questo è risolto il problema per ora.