Tengo una lista desplegable que se puede usar para diferentes datos. A veces, los datos tienen un indicador isActive (un BOOLEAN) y, a veces, no. Si no tiene la bandera en absoluto, quiero mostrar el elemento desplegable en negro. Si es así, quiero verificar el indicador isActive y, si es verdadero, mostrar el elemento en negro; de lo contrario, mostrarlo en rojo. En la siguiente declaración, la clase text.danger significa "rojo".
<tr *ngFor="let item of resultItems; let i = index;" [class.active]="activeRowIndex === i" [class.text-danger]="!item?.isActive ? false : (item.isActive === null ? true : false)"Cuando el indicador isActive no está presente, hace lo correcto y muestra los elementos en negro. Cuando la bandera existe, los artículos SIEMPRE se muestran en negro. ¿Cuál es mi problema?
Cambié para usar indefinido, de la siguiente manera:
[class.text-danger]="item.isActive === undefined ? false : !item.isActive"Si no existe, será undefined , no nulo. Cuando usa el operador === con nulo, solo aceptará nulo y ningún otro valor. Sin embargo, si usa == , aceptará tanto nulo como indefinido.
Dicho esto, tu código aún no sigue lo que quieres que haga. Su primera verificación ( !item?.isActive ) será verdadera cuando isActive sea falsa, lo que significa que toda la expresión se vuelve falsa y el texto será negro. Además, undefined y null son "falsos", por lo que si tiene uno de esos, nunca aparecerá en la otra subexpresión ( item.isActive === null ? true : false )
Comenzaría comprobando nulo/indefinido, y si no es indefinido/nulo, mire el valor. Como esto:
item?.isActive == null ? false : !item?.isActiveEsto incluso se puede simplificar a:
item?.isActive != null && !item?.isActiveSolo para aclarar el problema. Por ejemplo:
interface Intf { isActive?: boolean; }; const first: Intf = { isActive: true }; const second: Intf = { isActive: false }; const third: Intf = {}; console.log(first?.isActive ? true : false); // true console.log(second?.isActive ? true : false); // false console.log(third?.isActive ? true : false); // falseSi está utilizando el '?' operador, no hay necesidad de verificación adicional. Si el activo está ahí, entonces estás comprobando su valor. Si no, eso es 'falso' desde el principio.