Ngstyle selects items randomly

Question

I have a problem with ngstyle in Angular.

When I have a condition that ngstyle has to satisfy and it does, it either changes the background of the html element or not, and it's completely random.

ex. for 122 it will load a GIF once and not once, and it's random

The process is that first it draws a number from this.data, then ngstyle checks the condition and if the condition is true it should change the background of the html element. But unfortunately it changes sometimes and not.

Proccess

1. https://ibb.co/s9WRhg1
2. https://ibb.co/kyPXrfy

for (var i = 1; i <= 10; i++) {
    ((index) => {
        setTimeout(() => {        
          this.linia1 = this.data[Math.floor(Math.random() * (730 - (0)) + (0))];
        }, i * 2000);
    })(i);

 <div class="jeden"
        [style.background-image]="linia1 === 111 ? 'url(' + 'https://media.giphy.com/media/b5atZz6rAaMqbDVF3W/source.gif' + ')' : ''"
        [style.background-image]="linia1 === 112 ? 'url(' + 'https://i.giphy.com/media/jwJZ8vjqnLjiks7dAC/source.gif' + ')' : ''"
        [style.background-image]="linia1 === 113 ? 'url(' + 'https://i.giphy.com/media/Gopda0HEGY6RJDr65y/source.gif' + ')' : ''"
        [ngStyle]="linia1 === 121 ? jdj : ''" 
        [ngStyle]="linia1 === 122 ? jdd : ''" 
        [ngStyle]="linia1 === 123 ? jdt : ''" 
        [ngStyle]="linia1 === 131 ? jtj : ''" 
        [ngStyle]="linia1 === 132 ? jtd : ''" 
        [ngStyle]="linia1 === 133 ? jtt : ''" 
        [ngStyle]="linia1 === 211 ? djj : ''" 
        [ngStyle]="linia1 === 212 ? djd : ''" 
        [ngStyle]="linia1 === 213 ? djt : ''" 
        [ngStyle]="linia1 === 221 ? ddj : ''" 
        [ngStyle]="linia1 === 222 ? ddd : ''" 
        [ngStyle]="linia1 === 223 ? ddt : ''" 
        [ngStyle]="linia1 === 231 ? dtj : ''" 
        [ngStyle]="linia1 === 232 ? dtd : ''" 
        [ngStyle]="linia1 === 233 ? dtt : ''" 
        [ngStyle]="linia1 === 311 ? tjj : ''" 
        [ngStyle]="linia1 === 312 ? tjd : ''" 
        [ngStyle]="linia1 === 313 ? tjt : ''" 
        [ngStyle]="linia1 === 321 ? tdj : ''" 
        [ngStyle]="linia1 === 322 ? tdd : ''" 
        [ngStyle]="linia1 === 323 ? tdt : ''" 
        [ngStyle]="linia1 === 331 ? ttj : ''" 
        [ngStyle]="linia1 === 332 ? ttd : ''" 
        [ngStyle]="linia1 === 333 ? ttt : ''" 

        >
    {{ linia1 }}

    jdj = {
    'background-image': 'url(https://i.giphy.com/media/TOEgHDjU4oLD1AUNWa/source.gif)'
    }
    jdd = {
    'background-image': 'url(https://i.giphy.com/media/yddWabBy6HKG8Wxi0O/source.gif)'
    }
    jdt = {
    'background-image': 'url(https://i.giphy.com/media/zdhOoGiuloks7xxalu/source.gif)'
    }
    jtj = {
    'background-image': 'url(https://i.giphy.com/media/kCDUsh9GhECrPj6uge/source.gif)'
    }
    jtd = {
    'background-image': 'url(https://i.giphy.com/media/rcXJxA8Z5uoi3xMlVy/source.gif)'
    }
    jtt = {
    'background-image': 'url(https://i.giphy.com/media/LfUskQxIwRFX6BIgCx/source.gif)'
    }
    djj = {
    'background-image': 'url(https://i.giphy.com/media/0oVDtqpjJkg6JolXBN/source.gif)'
    }

https://ibb.co/kyPXrfy

I have shown two ways to solve this problem, but they work the same.

For example, I draw 10 gifs and it will display only 4 and the next draw 5. I know this solution is probably suboptimal, but that's how I arranged it

Answer 1

To apply the multiple conditions in ngStyle we should use conditional operator.

Use the code shown below (here I have used conditions for 121, 122 & 123 you can add as many as you want):

Template:

<div class="jeden"
[ngStyle]="linia1 === 121 ? jdj : linia1 === 122 
        ? jdd : linia1 === 123
        ? jdt:'' " >

component.ts define these style variables ( jdj, jdd, jdt)

jdj = {
    'background-image': 'url(https://i.giphy.com/media/TOEgHDjU4oLD1AUNWa/source.gif)'
    }
    jdd = {
    'background-image': 'url(https://i.giphy.com/media/yddWabBy6HKG8Wxi0O/source.gif)'
    }
    jdt = {
    'background-image': 'url(https://i.giphy.com/media/zdhOoGiuloks7xxalu/source.gif)'
    }
    jtj = {
    'background-image': 'url(https://i.giphy.com/media/kCDUsh9GhECrPj6uge/source.gif)'
    }

This will load the background-image based on the linia1 values