2016-06-21 7 views
8

में विशेषता निर्देश में सेट करें। मैं कोणीय 2 के साथ बूटस्ट्रैप टैब स्ट्रिप सेट अप करने का प्रयास कर रहा हूं। मेरे पास ngFor में टैब प्रस्तुत करना है, लेकिन जब मैं # को डालने का प्रयास करता हूं तो मुझे टेम्पलेट त्रुटियां मिल रही हैं href अभिव्यक्ति। तो इस टेम्पलेट संकलित लेकिन मैं क्या चाहते हैं नहीं है:कोणीय

<ul class="nav nav-tabs" role="tablist"> 
    <li *ngFor="let aType of resourceTypes; let i = index" 
     [ngClass]="{'active': i == 0}" 
     role="presentation"> 
    <a [attr.href]="aType.Name" 
     [attr.aria-controls]="aType.Name" 
     role="tab" 
     data-toggle="tab"> 
     {{aType.Name}} 
    </a> 
    </li> 
</ul> 

मुझे क्या करना चाहते हैं [attr.href]="#aType.Name" है लेकिन यह है कि ऊपर चल रही है। विशेषता निर्देश में अभिव्यक्ति के सामने # को प्रीपेड करने के लिए सही वाक्यविन्यास क्या है?

उत्तर

19

#

साथ उपसर्ग के लिए कोई जरूरत नहीं है इस कोड में

<ul class="nav nav-tabs" role="tablist"> 
    <li *ngFor="let aType of resourceTypes; let i = index" 
     [ngClass]="{'active': i == 0}" 
     role="presentation"> 
    <a [attr.href]="aType.Name" 
     [attr.aria-controls]="aType.Name" 
     role="tab" 
     data-toggle="tab"> 
     {{aType.Name}} 
    </a> 
    </li> 

aType पहले से ही *ngFor चर को संदर्भित करता है।

आप उपयोग कर सकते हैं आप एक शाब्दिक # उपसर्ग चाहते हैं

[attr.href]="'#' + aType.Name" 

भी attr. के लिए कोई जरूरत नहीं है, तो तत्व वास्तव में संपत्ति href जो <a> के साथ मामला है है।

+3

'[attr.href]' बनाम '[href] 'का उपयोग करते समय एक बार अंतर यह है कि यदि मूल्य शून्य है तो पूर्व बाध्य नहीं होगा- यह मेरे लिए आसान था, क्योंकि मैं चाहता था कि एंकर को अक्षम किया जाए यूआरएल संपत्ति मैं बाध्यकारी था सेट नहीं किया गया था। – spongessuck

8

वैसे आप यह स्ट्रिंग प्रक्षेप के साथ बाध्य कर सकते हैं:

href = "#{{aType.Name}}" 

(ध्यान दें कि यहां इस्तेमाल किया विशेषता href है, नहीं [attr.href]।)