Angular2 हिडन उपेक्षा

Question

मैं Angular2 में छिपे हुए संपत्ति का उपयोग करने की कोशिश कर रहा हूँ और जब मैं एक शैली है कि DIV के प्रदर्शन को बदल देता है शामिल हैं, छिपे हुए संपत्ति नजरअंदाज कर दिया है।

जब नीचे कोड चलाया जाता है, दोनों divs प्रदर्शित होते हैं। जब मैं कक्षा को हटा देता हूं। डिस्प्लेइनलाइन पहली डीआईवी छिपी हुई है और दूसरा प्रदर्शित होता है (अपेक्षित के रूप में)।

क्या मैं छिपी हुई और प्रदर्शन सीएसएस का एक साथ उपयोग कर सकता हूं?

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); 

भंडार: https://github.com/albi000/ng2-play

Answer 1

नोट: <span> के डिफ़ॉल्ट करने के लिए "display: inline", तो आप उन्हें बजाय का उपयोग कर सकते हैं।

वर्तमान में कक्षाएं [छुपा] ओवरराइड करती हैं। मैं सहमत हूं, यह एनजी-छुपा/एनजी-शो के रूप में प्रभावी नहीं है और मुझे उम्मीद है कि यह कोणीय 2 के भविष्य के संस्करणों में तय है। यह वर्तमान में an open on issue on the Angular2 repo है।

आप बस वर्ग के साथ अपने [छिपा] तत्व लपेटकर द्वारा समस्या को दूर कर सकते हैं।

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

Answer 2

आप style.display बजाय hidden उपयोग कर सकते हैं आप दृश्यता पर अधिक कुशल नियंत्रण की आवश्यकता है।

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

Answer 3

मैं बूटस्ट्रैप

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

की btn वर्ग के साथ इसी तरह की समस्या का सामना करना पड़ा रहा सीएसएस स्टाइलशीट के अंत मैं विश्व स्तर पर उपयोग करने पर

[hidden] { 
    display: none; 
} 

जोड़कर इस हल किया। यह अब के लिए समस्या हल हो गया है।