Ngstyle 随机选择项目

Question

我对 Angular 中的 ngstyle 有疑问。

当我有一个 ngstyle 必须满足的条件并且它确实满足时，它要么改变 html 元素的背景，要么不改变，这完全是随机的。

例如。对于 122，它将加载 GIF 一次而不是一次，而且它是随机的

过程是首先从this.data中抽取一个数字，然后ngstyle检查条件，如果条件为真，它应该改变html元素的背景。但不幸的是，它有时会改变而不是。

进程

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张gif，它只显示4张，下一张显示5张。我知道这个解决方案可能不是最优的，但我就是这样安排的

Answer 1

要在 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)'
    }

这将根据 linia1 值

加载 background-image

Ngstyle 随机选择项目

Ngstyle selects items randomly

html

javascript

gif

ng-style

angular