Angular 2 Genera nome classe in base all'indice ngFor

Question

Si è verificato un problema con la creazione di un nome di classe dinamico basato sull'indice del ciclo Angular 2 ngFor. Ho dovuto usare la seguente sintassi perché Angular 2 non ama ngFor e ngIf sullo stesso elemento.

Con questa sintassi, come è possibile creare un nome di classe dinamico con il valore dell'indice su {{index}}. So che questo non è il codice A2 corretto, ma l'ho messo nel mio esempio di codice per mostrarti dove vorrei che appaia il valore.

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

Il valore "varianti" è un array vuoto di una lunghezza impostata. "variante" quindi non ha valore.

"currentVariant" è un numero che per default è uguale a 0.

EDIT: Questo codice di cui sopra è corretto. Ho avuto un altro errore estraneo che pensavo fosse collegato a questo codice.

Answer 1

Non capisco davvero il tuo problema ;-)

Ci sono due modi per impostare le classi per un elemento specifico:

• come si fa con le parentesi graffe:

  @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 viene visualizzato solo per il terzo elemento (indice 2) e in rosso.

• Come suggerito dal @Langley utilizzando la direttiva 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 ] 
  }) 
  

  Il diverso è che è necessario specificare la direttiva NgClass all'interno dell'attributo providers del componente. Di nuovo Test viene visualizzato solo per il terzo elemento (indice 2) e in rosso.

vostre frasi seguenti: "Il valore variants è una matrice vuota di una lunghezza prestabilita variant ha dunque alcun valore currentVariant è un numero che per default è uguale a 0...". Come ti aspetti che venga visualizzato qualcosa se l'array è vuoto. Un ngFor è un'iterazione ...

Spero che ti aiuta, Thierry