Angular 2 Generate Class Name Na podstawie indeksu ngFora

Question

Występuje problem z utworzeniem dynamicznej nazwy klasy na podstawie indeksu Angular 2 ngFor. Musiałem użyć następującej składni, ponieważ Angular 2 nie lubi ngFor i ngIf na tym samym elemencie.

Przy pomocy tej składni, w jaki sposób utworzyć dynamiczną nazwę klasy o wartości indeksu na {{index}}. Wiem, że to nie jest prawidłowy kod A2, ale umieściłem go w moim przykładzie kodu, aby pokazać, gdzie chciałbym, aby pojawiła się wartość.

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

Wartość "warianty" to pusta tablica o określonej długości. "wariant" zatem nie ma żadnej wartości.

"currentVariant" to numer, który domyślnie jest równa 0.

EDIT: Ten kod powyżej jest poprawne. Miałem kolejny obcy błąd, który moim zdaniem był związany z tym kodem.

Answer 1

ja naprawdę nie rozumiem problemu ;-)

Istnieją dwa sposoby ustawienia zajęcia dla konkretnego elementu:

• sposób zrobić z klamrowych:

  @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 wyświetla się tylko dla trzeciego elementu (indeks 2) i na czerwono.

• Jak sugeruje @Langley za pomocą dyrektywy 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 ] 
  }) 
  

  różnych jest to, że trzeba określić dyrektywę NgClass wewnątrz atrybutu komponentu providers. Ponownie Test jest wyświetlany tylko dla trzeciego elementu (indeks 2) i na czerwono.

Twoje następujących zdań: „Wartość variants jest pusta tablica zadanej długości variant ma zatem wartość currentVariant to numer, który domyślnie jest równa 0...”. Jak można się spodziewać wyświetlenia czegoś, jeśli tablica jest pusta? ngFor jest iteracja ...

Nadzieję, że to pomaga, Thierry