कोणीय 2 उत्पन्न वर्ग नाम एनजीएफओआर इंडेक्स

Question

पर आधारित मैं कोणीय 2 एनजीफ़ोर लूप इंडेक्स के आधार पर एक गतिशील वर्ग नाम बनाने में समस्या में भाग रहा हूं। मुझे निम्नलिखित वाक्यविन्यास का उपयोग करना पड़ा क्योंकि कोणीय 2 को समान तत्व पर ngFor और ngIf पसंद नहीं है।

इस वाक्यविन्यास के साथ, मैं {{index}} पर इंडेक्स के मूल्य के साथ एक गतिशील कक्षा का नाम कैसे बना सकता हूं। मुझे पता है कि यह उचित ए 2 कोड नहीं है, लेकिन मैंने इसे दिखाने के लिए इसे मेरे कोड उदाहरण में रखा है जहां मैं मूल्य दिखाना चाहता हूं।

<div class="product-detail__variants"> 
    <template ngFor #variant [ngForOf]="variants" #index="index"> 
     <div *ngIf="currentVariant == index"> 
      <div class="product-detail-carousel-{{index}}"> 

      </div> 
     </div> 
    </template> 
</div> 

मान "संस्करण" एक सेट लंबाई की एक खाली सरणी है। इस प्रकार "संस्करण" का कोई मूल्य नहीं है।

"currentVariant" एक नंबर है कि डिफ़ॉल्ट रूप से बराबर होती है 0.

संपादित है: ऊपर यह कोड सही है। मेरे पास एक और अपर्याप्त त्रुटि थी जिसे मैंने सोचा था कि इस कोड से जुड़ा हुआ था।

Answer 1

मैं वास्तव में आपकी समस्या ;-)

वहाँ दो किसी विशिष्ट तत्व के वर्गों सेट करने के लिए तरीके हैं समझ में नहीं आता:

• जिस तरह से आप कर्ली कोष्ठक के साथ कार्य करें:

  @Component({ 
      selector: 'my-app', 
      template: ` 
      <div class="product-detail__variants"> 
       <template ngFor #variant [ngForOf]="variants" #index="index"> 
       <div *ngIf="currentVariant == index"> 
        <div class="product-detail-carousel-{{index}}"> 
        Test 
        </div> 
       </div> 
       </template> 
      </div> 
      `, 
      styles: [ 
      '.product-detail-carousel-2 { color: red }' 
      ] 
  }) 
  

  Test केवल तीसरे तत्व (अनुक्रमणिका 2) और लाल रंग में प्रदर्शित होता है।

• ngClass निर्देश

  import {NgClass} from 'angular2/common'; 
  
  @Component({ 
      selector: 'my-app', 
      template: ` 
      <div class="product-detail__variants"> 
       <template ngFor #variant [ngForOf]="variants" #index="index"> 
       <div *ngIf="currentVariant == index"> 
        <div class="product-detail-carousel-{{index}}"> 
        Test 
        </div> 
       </div> 
       </template> 
      </div> 
      `, 
      styles: [ 
      '.product-detail-carousel-2 { color: red }' 
      ], 
      directives: [ NgClass ] 
  }) 
  

  अलग का उपयोग कर @Langley द्वारा सुझाव दिया है कि आप अपने घटक के providers विशेषता भीतर NgClass निर्देश निर्दिष्ट करने की आवश्यकता है। फिर Test केवल तीसरे तत्व (अनुक्रमणिका 2) और लाल रंग में प्रदर्शित होता है।

आपका निम्नलिखित वाक्य: "मूल्य variants एक सेट लंबाई के एक खाली सरणी है variant इस प्रकार कोई मूल्य नहीं है currentVariant कि डिफ़ॉल्ट रूप से बराबर होती है 0. एक संख्या है।।"। यदि आपकी सरणी खाली है तो आप कुछ कैसे प्रदर्शित होने की उम्मीद करते हैं। एक ngFor एक यात्रा है,

आशा है कि यह आप में मदद करता है ... थियरी