Tengo 4 filas, cada fila contiene 3 cartas. Estoy obteniendo información para estas tarjetas de db y luego las renderizo usando ngfor en html. El problema es que quiero que cada tarjeta de una fila muestre un color diferente.
Ejemplo:->
FILA 1: TARJETA AZUL | TARJETA BLANCA | TARJETA ROJA
FILA 2: TARJETA AZUL | TARJETA BLANCA | TARJETA ROJA
a partir de ahora puedo hacerlo para dos colores, pero ¿cómo puedo hacerlo para 3 colores como dije en el ejemplo?
<div *ngFor="let r of rates; let i=index;"> <div class="box" [ngClass]="i % 2 == 0 ? 'BLUECARD' : 'REDCARD'"> <!-- card contents --> </div> </div>Como puede ver, puedo mostrar 2 colores alternativamente, pero ¿cómo puedo mostrar 3 colores en su lugar?
Crearía una matriz de cadenas con sus colores y luego [ngClass]=colorArray[i] o algo similar.
puedes probar estos (mientras tanto, estoy usando lógica tonta solo por ejemplo): -
[ngClass]="{1 : 'BLUECARD', 2 : 'REDCARD', 3 : 'WHITECARD'}[i % 2]"o
[ngClass]="{'BLUECARD': i % 2 === 0, 'REDCARD' : i % 2 !== 0, 'WHITECARD': i % 2 === undefined }"Tuve que hacer algo como esto. Creé una función que devuelve un color basado en lo que le das como parámetro; En tu caso, puedes crear una función que tome i como parámetro y devuelva un color
<div class="box" [ngStyle]="{'background-color':giveCouleur(i)}"> <!-- card contents --> </div>En su archivo ts
giveCouleur(i:any){ var color="default_color";//or null if you want if(i%2==0){ color="Your_colr"; //ex:color="#ffffff" }else if(i%3==0){ color="your_color"; }else{ color="your_color" } //In this case, you can create as many conditions as you want. return color; }puedes probar con ngClass
<div class="box" [ngClass]="{giveCouleur(i)}"> <!-- card contents --> </div> giveCouleur(i:any){ var color="default_color";//or null if you want if(i%2==0){ color="BLUECARD"; }else if(i%3==0){ color="REDCARD"; }else{ color="WHITECARD" } //In this case, you can create as many conditions as you want. return color; }