Utilisation de NGFOR pour boucler à travers un tableau d'éléments, je veux des éléments avec un index uniforme d'avoir une couleur d'arrière-plan différente des éléments avec un index impair. J'ai pu réaliser cela dans Vuejs en utilisant le code ci-dessous:
J'ai essayé le code angulaire ci-dessous, pas de succès: p>
<div v-for="(itemforsale, index) in filteredListMainitemsforsale">
<div :class="{'box bg-success text-center': index % 2, 'box bg-info text-center': !(index % 2)}" >
</div>
</div>
4 Réponses :
<ion-col *ngFor="let item of [].constructor(50); let i = index" > <ion-card [style.color]="i % 2 === 0 ? 'secondary' : 'primary'"> </ion-card> </ion-col>
Essayez comme ceci: pour la couleur de fond:
Vous pouvez essayer comme ceci
quelque chose comme ça? https://stackblitz.com/edit/angular-fia7hx
<div *ngFor="let item of [1,2,3,4,5,6,7,8,9]; index as i">
<p [ngClass]="{greyClass: i%2 === 0}">
{{item}}
</p>
</div>
.greyClass {
background-color: grey;
}
il suffit d'utiliser css même et impair propriété
Vous pouvez utiliser dans le * ngfor "let événement = même" voir angular.io/api/common/ngforof < / a> et ngclass
[ngclass] = "{MÊME? 'CENTRE TEXT-CENTRE BG-SUCCESS': 'Text-Center BG-INFO'}" ou[NGCLASS] = "{ 'Boîte à centre textuel BG-Success': Même, 'Text-Center BG-Info'} :! Même "