web-dev-qa-db-fra.com

ngPour utiliser ngClass sur les lignes et les colonnes

J'utilise Angular2 et son ngFor. Je souhaite ajouter une classe aux lignes impaires et paires afin de pouvoir les séparer visuellement par couleur.

Voici mon code (qui ne marche pas vraiment):

<div *ngFor="#meeting of meetingList; #index=index; #odd=odd; #even=even;"
  class="row"
  [ngClass]="{ odd: odd, even: even }
">
  <div class="col"></div>
  <div class="col"></div>
</div>

Bien que si je le fais comme ça, le code fonctionne:

<div *ngFor="#meeting of meetingList; #index=index; #odd=odd; #even=even;"
  class="row"
">
  <div class="col" [ngClass]="{ odd: odd, even: even }"></div>
  <div class="col" [ngClass]="{ odd: odd, even: even }"></div>
</div>

Existe-t-il un meilleur moyen de mettre classe en ligne plutôt qu'en colonnes? Merci d'avance.

angularngfor
14
be-codified

Votre premier exemple de code fonctionne bien Exemple avec Plunker

@Component({
  selector: 'my-app',
  styles: [`
    .even { color: red; }
    .odd { color: green; }
    `],
  template: `
  <h2>Hello {{name}}</h2>
  <div *ngFor="let meeting of meetingList; let index=index; let odd=odd; let even=even;"
      class="row"
      [ngClass]="{ odd: odd, even: even }">{{meeting}}
    <div class="col"></div>
    <div class="col"></div>
  </div>
`
})
export class App {
  meetingList = ['a', 'b', 'c'];
}

 enter image description here

34
Günter Zöchbauer

let index = index;

then [index] = index;

then [class.odd] = "index% 2";

2
Phil Palmieri

a travaillé pour moi 

<ion-card *ngFor ="let item of itemsCat; let odd=odd; let even=even " [ngClass]="{ odd: odd, even:even}" >
.....
</ion-card>
1
Shuhad zaman