Question

我有一个任务是在Angular项目中创建4个闪烁的div。颜色来自具有16个元素的数组中的API，每个元素是一个包含4个元素的数组（字符串）。

ColorPatterns[
  Pattern1["Color1", "Color2", "Color3", "Color4"],
  Pattern2["Color1", "Color2", "Color3", "Color4"],
  ...
  Pattern16["Color1", "Color2", "Color3", "Color4"],
]

Color1用于第一个div，Color2用于第二个div，依此类推。 16的序列必须每1秒改变一次，在最后一个元素（Pattern16）之后，序列应该重新开始：Pattern1 - ＆gt; Pattern2 - ＆gt; ... - ＆gt; Pattern16 - ＆gt; Pattern1 - ＆gt; ...... 如何在Angular中解决这个问题？

Answer 1

使用Observable进行计时。如果我们可以只用一个div，那么其他人就可以重复了。

Observable.interval(1000) //emit every 1 sec with values = 0 then 1 them 2 ..
    .map(value=>ColorPaterns[value%16][0]) // 0 for 1st color
    .subscribe((firstColor)=>{
        // set 1st div color here
    })

Angular中的颜色序列闪烁

1 个答案: