Ngstyle выбирает элементы случайным образом

У меня проблема с ngstyle в Angular.

Когда у меня есть условие, которому должен удовлетворять ngstyle, и он это делает, он либо меняет фон элемента html, либо нет, и это совершенно случайно.

бывший. для 122 он загрузит GIF один раз и не один раз, и это случайно

Процесс заключается в том, что сначала он рисует число из this.data, затем ngstyle проверяет условие, и если условие истинно, он должен изменить фон элемента html. Но, к сожалению, он иногда меняется и не меняется.

Процесс

  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

Я показал два способа решения этой проблемы, но они работают одинаково.

Например, я рисую 10 гифок, а он отобразит только 4, а следующий розыгрыш 5. Я знаю, что это решение, вероятно, неоптимальное, но я так устроил.


javascript angular html gif ng-style
person xd3s3    schedule 31.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Чтобы применить несколько условий в ngStyle, мы должны использовать условный оператор. используйте приведенный ниже код (здесь я использовал условия для 121, 122 и 123, вы можете добавить столько, сколько хотите):

Шаблон:

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

component.ts определите эти переменные стиля ( 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)'
    }

Это загрузит background-image на основе значений linia1

person Shivansh Seth    schedule 31.01.2021