Estoy tratando de resaltar filas en una tabla en función de un valor de ESTADO. Puedo hacer que funcione con amarillo o sin color haciendo:
[ngStyle]="{'background-color': cnresult.STATUS === 1 ? 'yellow' : ''}"¿Cómo puedo agregar otra opción donde si STATUS === 2 se vuelve rojo?
Puede crear un objeto de mapa en el archivo ts
colorMap = { '1': 'yellow', '2': 'red', } <div [ngStyle]="{'background-color': colorMap[cnresult.STATUS] || ''}"></div>Con esto puedes agregar múltiples condiciones.
Puedes hacer algo como esto también,
[ngStyle] = "{'background-color': getBackground(cnresult.STATUS)}"Luego, en su archivo component.ts,
getBackground(status) { (2) switch (status) { case 1: return 'yellow'; case 2: return 'green'; case 3: return 'red'; } }Puede encadenar múltiples operaciones ternarias
[ngStyle]="{'background-color': cnresult.STATUS === 1 ? 'yellow' : cnresult.STATUS === 2 ? 'red' : ''}"Otra opción, posiblemente más fácil de mantener, sería aplicar condicionalmente la(s) clase(s) así:
<div [class.yellow]="cnresult.STATUS === 1" [class.red]="cnresult.STATUS === 2" ></div> // This belongs in your .css file .yellow { background-color: yellow; } .red { background-color: red; }