Angular2 Versteckt Ignoriert

Question

Ich versuche, die Hidden-Eigenschaft in Angular2 zu verwenden, und wenn ich einen Stil einschließe, der die Anzeige des DIV ändert, wird die ausgeblendete Eigenschaft ignoriert.

Wenn der folgende Code ausgeführt wird, werden beide Divs angezeigt. Wenn ich die Klasse .displayInline entferne, wird das erste DIV ausgeblendet und die zweite wird angezeigt (wie erwartet).

Kann ich Hidden und die Anzeige CSS zusammen verwenden?

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

Hinweis: <span> ‚s standardmäßig auf "display: inline", sollten Sie sie stattdessen verwenden.

Derzeit Klassen überschreiben [versteckt]. Ich stimme zu, das ist nicht so effektiv wie ng-hide/ng-show und ich hoffe, es ist in zukünftigen Versionen von angular2 behoben. Es ist derzeit an open on issue on the Angular2 repo.

Sie können das Problem lösen, indem Sie einfach Ihr [verborgenes] Element in die Klasse einfügen.

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

Answer 2

können Sie style.display anstelle von hidden, wenn Sie mehr feinkörnige Kontrolle über die Sichtbarkeit benötigen.

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

Answer 3

stand ich ähnliches Problem mit BTN Klasse von Bootstrap

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

ich dies durch

Zugabe gelöst

[hidden] { 
    display: none; 
} 

am Ende des CSS-Stylesheet I global verwenden. Dies ist das Problem für den Moment gelöst.