Angular中的闪烁颜色序列答案

【问题标题】：Blinking color sequence in AngularAngular中的闪烁颜色序列
【发布时间】：2018-11-22 10:32:39
【问题描述】：

我的任务是在 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 -> Pattern2 -> ... -> Pattern16 -> Pattern1 -> ... 。这个问题应该如何在 Angular 中解决？

【问题讨论】：

那么，您自己的代码到此为止有多远？我无法想象你在自己没有编写任何代码的情况下完成了这项任务。这个页面不是用来做功课的，而是帮助你找出其中的错误。

标签： css angular

【解决方案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
    })

【讨论】：