Using ngClass to assign color based on stored value

Ionic Framework ionic-v3
1

So I’m trying to do a little formatting on an ion-item in a list based on a stored quiz value. I have the following html for the button:

<ion-item class="buth" text-left color="b3"  [ngClass]="{gold: isReadingGold2, silver: isReadingSilver2, bronze: isReadingBronze2, fail: isReadingFail2}">Button Text</ion-item>

and the typescript that handles checking the quiz score and setting class:

this.storage.get('pq1-readscore').then((val) => {
          
        this.q1_readscore = val;

        if (this.q1_readscore = 10) {
        this.isReadingGold2 = true;
        this.isReadingSilver2 = false;
        this.isReadingBronze2 = false;
        this.isReadingFail2 = false;
        }
        else if (this.q1_readscore = 9) {
        this.isReadingGold2 = false;
        this.isReadingSilver2 = true;
        this.isReadingBronze2 = false;
        this.isReadingFail2 = false;
        }
        else if (this.q1_readscore = 8) {
        this.isReadingGold2 = false;
        this.isReadingSilver2 = false;
        this.isReadingBronze2 = true;
        this.isReadingFail2 = false;
        } 
        else if (this.q1_readscore < 8) {
        this.isReadingGold2 = false;
        this.isReadingSilver2 = false;
        this.isReadingBronze2 = false;
        this.isReadingFail2 = true;
        }

          

        })

I know that this probably isn’t the cleanest/shortest solution but I can’t figure out why my ngClass isn’t styling the button correctly. It works fine if there are only 2 classes but when I go to 3 or 4 like in the above code it won’t change color based on the stored value…

2

Well, your first problem is that your first three if blocks reassign q1_readscore…

If that’s like…just a typo on here…when you inspect the element and look at the css classes applied how many are applied? My guess is one class is overriding the other.

3

Yeah the first class this.isReadingGold is overriding all of the others regardless of the value of q1_readscore.

I’m sure that I’ve done something dumb but I’m confused as to what you mean by the first three blocks reassigning q1_readscore?

I’m trying to check the value of q1_readscore and apply a single class depending on whether or not the value is 10, 9, 8, or less. It’s my first time using an ngClass that has more than 2 possibilities.

4

You are assigning 10 to readscore. This makes readscore 10. Every time this code block runs, readscore will be 10.

This has absolutely nothing to do with your class stuff and everything to do with you assigning 10 to readscore every time. I’d strongly recommend you use breakpoints and actually check the values of your variables when your code runs.

1 Like
5

But what about the code above that where I assign the readscore based on the pq1 value in the database?

this.storage.get('pq1-readscore').then((val) => {
          
        this.q1_readscore = val;

What I’m thought that I was doing after that was running conditionals that check IF the readscore = 10 THEN set the following classes, and so on for the other conditions.

The code works fine when I only have 2 classes such as in the following example:

this.storage.get('pq4-readscore').then((val) => {
  
          this.q4_readscore = val;
          if (this.q4_readscore >= 8) {
            this.isReadingActive5 = true;
            this.isReadingDisabled5 = false;
          } else if (this.q4_readscore < 8) {
            this.isReadingActive5 = false;
            this.isReadingDisabled5 = true;
          }

          

        })

Is the problem that I’m using the equals sign instead of greater than/less than?

EDIT: Got it fixed based on using greater than/less than instead of equals. So the conditions are as follows:

this.q1_readscore = val;

        if (this.q1_readscore > 9.5) {
        this.isReadingGold2 = true;
        this.isReadingSilver2 = false;
        this.isReadingBronze2 = false;
        this.isReadingFail2 = false;
        }
        else if (this.q1_readscore > 8.5) {
        this.isReadingGold2 = false;
        this.isReadingSilver2 = true;
        this.isReadingBronze2 = false;
        this.isReadingFail2 = false;
        }
        else if (this.q1_readscore > 7.5) {
        this.isReadingGold2 = false;
        this.isReadingSilver2 = false;
        this.isReadingBronze2 = true;
        this.isReadingFail2 = false;
        } 
        else if (this.q1_readscore < 7.5) {
        this.isReadingGold2 = false;
        this.isReadingSilver2 = false;
        this.isReadingBronze2 = false;
        this.isReadingFail2 = true;
        }

Thanks so much @rlouie!

6

I think it would be wise for you to review basic javascript programming.

= assignment
=== equality check

1 Like