Html 角度：如何在中制作时间信号

我需要做一个交通灯，从0到10分钟是绿色，从10到20黄色，从20到30红色，时间由服务决定

到目前为止，这是我的代码

这是组件

导入{
组成部分，
奥尼特，
输入
}从“@angular/core”开始；
进口{
TiempoService
}来自“app/servicicios/tiempo.service”
@组成部分({
选择器：“应用程序菜单”，
templateUrl:'./menu.component.html'，
样式URL:['./menu.component.css']
})
导出类MenuComponent实现OnInit{
@Input（）tiemposervice:tiemposervice；
构造函数（）{}
恩戈尼尼特（）{
}
}

我建议您需要这样的东西：

服务：

模板：

如果只需要显示一次灯光，请添加take操作符：

从'@angular/core'导入{Injectable}；
从“rxjs”导入{Observable}；
@可注射（）
出口级照明服务{
getLight（间隔）：可观察{
返回可观察间隔（间隔）
.timeInterval（）
.map（时间=>{
如果（time.value%3==2）{
返回“绿色”；
}else if（time.value%3==0）{
返回“黄色”；
}else if（time.value%3==1）{
返回“红色”；
}
})
.采取（2）；
}
}

如果它能工作，但最后我希望它变成红色，你能帮我吗？谢谢添加

。在
LightService
中的
map
之后添加（2）

。

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class LightService {
  getLight(interval): Observable<string> {
    return Observable.interval(interval)
      .timeInterval()
      .map(time => {
        if(time.value % 3 === 2) {
          return 'green';
        } else if(time.value % 3 === 0) {
          return 'yellow';
        } else if (time.value % 3 === 1) {
          return 'red';
        }
      });
  }
}

import { Component, OnInit } from '@angular/core';
import { LightService } from './light.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ LightService ]
})
export class AppComponent implements OnInit {
  light: string = "green";

  constructor(private lightService: LightService) {}

  ngOnInit() {
    this.lightService
      .getLight(10000) // 10 seconds interval
      .subscribe(light => this.light = light);
  }
}

<h1>
  {{ light }}
</h1>
<ul>
  <li *ngIf="light === 'green'" class="green"></li>
  <li *ngIf="light === 'yellow'" class="yellow"></li>
  <li *ngIf="light === 'red'" class="red"></li>
</ul>

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid black;
}

.green {
  background-color: green;
}

.yellow {
  background-color: yellow;
}

.red {
  background-color: red;
}