I have a dropdown list that can be used for different data. Sometimes the data has an isActive flag (a BOOLEAN) and sometimes it does not. If it does not have the flag at all, I want to display the dropdown item in black. If it does, I want to check the isActive flag and if true, display the item in black, otherwise display it in red. In the following statement, the text.danger class means "red".
<tr *ngFor="let item of resultItems; let i = index;" [class.active]="activeRowIndex === i" [class.text-danger]="!item?.isActive ? false : (item.isActive === null ? true : false)"
When the isActive flag is not present, it does the right thing and shows the items in black. When the flag does exists, the items are ALWYAS displayed in black. What is my problem?
I changed to use undefined, as follow:
[class.text-danger]="item.isActive === undefined ? false : !item.isActive"
If it doesn't exist, it will be undefined, not null. When you use the === operator with null, it will only accept null and no other value. If you use == however, it will accept both null and undefined.
That said, your code still doesn't follow what you want it to do. Your first check (!item?.isActive) will be true when isActive is false, which means the whole expression becomes false and the text will be black. Also, undefined and null are "falsy", so if you have one of those it will never come into the other sub-expression (item.isActive === null ? true : false)
I'd start with checking for null/undefined, and if it isn't undefined/null, look at the value. Like this:
item?.isActive == null ? false : !item?.isActive
This can even be simplified to:
item?.isActive != null && !item?.isActive
Just to clear the problem. For example:
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); // false
If you're using the '?' operator, there's no need for additional checking. If the active it's there then you're checking his value. If not, that's 'false' from the beginning