2016-03-07 14 views
9
<ion-navbar hideBackButton > 
    <ion-title> </ion-title> 
    ... 
    ... 

में एचटीएमएल विशेषता के लिए मैं hideBackButton चाहते वहाँ सशर्त होने के लिए और मैं * ngIf साथ पूरे आयन नेवबार तत्व को दोहराने के लिए नहीं करना चाहती। क्या hideBackButton विशेषता के लिए * ngIf लागू करना संभव है?* ngIf Angular2

उत्तर

8

आप लाभ उठा सकते हैं प्रक्षेप:

<ion-navbar [attr.hideBackButton]="someExpression"> 
    <ion-title> </ion-title> 
    ... 
... 

तो someExpression अशक्त विशेषता मौजूद नहीं होगा और यदि someExpression कोई रिक्त स्ट्रिंग है, विशेषता वहाँ हो जाएगा।

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div [attr.hideBackButton]="someExpression"> 
     Test 
    </div> 
    <div (click)="toggleAttribute()">Toggle</div> 
    ` 
}) 
export class AppComponent { 
    constructor() { 
    this.someExpression = null; 
    } 

    toggleAttribute() { 
    if (this.someExpression==null) { 
     this.someExpression = ''; 
    } else { 
     this.someExpression = null; 
    } 
    } 
} 

इस plunkr देखें:: https://plnkr.co/edit/LL012UVBZ421iPX4H59p?p=preview

+0

करता है उदाहरण काम? – micronyks

+0

शुरुआत में प्लंकर लिंक की शुरुआत के साथ एक समस्या थी। लेकिन अब यह अच्छी तरह से काम करता है। – micronyks

+0

Euh हाँ, मेरा नमूना plunkr काम करता है ;-) "उदाहरण काम करता है" से आपका क्या मतलब है? –

19

आप उनके लिए बूलियन मूल्यों समाप्त करने के लिए करने के लिए null प्रदान करने के लिए है,

<ion-navbar [attr.hideBackButton]="someExpression ? true : null"> 

अन्यथा कोणीय बनाता

यहां एक नमूना है
<ion-navbar hideBackButton="false">