How to Invert boolean 'false' in typescript (ionic3 and cordova)

Question

I'm having a somewhat unexpected problem with inverting booleans in my application.

Environment: I'm having an application, written in typescript with Ionic 3 and I deploy it with help of cordova on an android device.

• Android API 25
• Cordova version: 7.0.1
• "@angular/core": "4.1.0"
• "ionic-angular": "3.2.1"
• "@ionic/cli-plugin-cordova": "^1.2.1"
• Typescript 2.3.3

Problem: I'm simply trying to invert a boolean, like shown in the console.log example below:

console.log('Clazz: ', clazz.name, ' : ', clazz.boolValue, ' : ', !clazz.boolValue)

Output:

Clazz:  A  :  true  :  false
Clazz:  B  :  true  :  false
Clazz:  C  :  true  :  false
Clazz:  D  :  false  :  false
Clazz:  E  :  false  :  false
Clazz:  F  :  false  :  false

So, 'true' gets inverted, but 'false' remains the same value. And with that my *ngIf-Directives in Angular do not work as expected.

Question: Am I doing something completly wrong? Or did it just happen, that the combined software versions I'm using do have a glitch together?

Answer 1

This is just a guess but it's probably a decent one, I think your clazz.boolValue might somehow be a string rather than a boolean at runtime. This would describe the behavior you're seeing.

!'true' // evaluates to boolean value false
!'false' // also evaluates to boolean value false

Try

console.log('Clazz: ', clazz.name, ' : ', clazz.boolValue, '|', typeof clazz.boolValue, ' : ', !clazz.boolValue) 

to confirm.