Fügen Sie Klassen in ngFor-Schleife hinzu

Question

Wie füge ich verschiedene Klassen für die inneren Elemente in einer ngFor-Schleife in Angular 4 hinzu? Sprich, ich habe einen Ausschnitt:

<div *ngFor="let article of articles"> 
    <div> 
    <h3>{{article.name}}</h3> 
    <p>{{article.body}}</p> 
    </div> 
</div> 

Also ich habe 2 Fragen: Wie kann ich verschiedene Klassen auf die h3-Elemente in jedem generierten Artikel hinzufügen, auf der Grundlage ihrer Reihenfolge (erste, zweite, dritte) und wie kann ich hinzufügen Klassen zu den h3-Elementen basierend auf ungerade-gerade Reihenfolge?

Answer 1

Sie können den Index, ungerade und gerade der aktuellen Iteration im ngForOf erhalten, kombinieren Sie das mit ngClass und Sie können die Klasse festlegen.

<div *ngFor="let article of articles; index as i; even as isEven; odd as isOdd"> 
    <div id="article"> 
    <h3 [ngClass]="{'odd': isOdd, 'even': isEven}">{{article.name}}</h3> 
    <p>{{article.body}}</p> 
    </div> 
</div> 

Sie erwähnen nicht, wie Sie den Index/die Position verwenden möchten, also gibt es keinen Code dafür. Ich bin mir sicher, dass Sie diesen Teil anhand des obigen Beispielcodes und der Dokumentation herausfinden können.

---

Wie @ Paco0 wies auch vielleicht aus Sie id="article" gemeint ähnlich id="{{article.id}}" oder etwas sein?