改变不同状态下时间线的颜色

Question

我制定了一个包含 4 个级别的时间线。当我单击每个级别时，时间线都充满了绿色。是否可以在不同类型的状态下改变这种颜色？

在状态 4 中，我的圆圈和线条都是绿色的，如何在剩余的 3 中更改这种颜色？

也就是说，在3我想要黄色，在2绿色3在1红色。

在图片中，我留下了我想要的示例

谁能帮帮我？

HTML

<ul class="timeline" id="timeline" >
    <li class="li" [ngClass]="priority['isComplete']?'complete':''" *ngFor="let priority of Priorities; let  p = index;">
        <div class="timestamp">
        </div>
        <div class="status">    
                <span class="circle" (click)="changeTimeline(priority.id)">{{priority.id}}</span>
            <h4 class="timelineh4">{{priority.text}}</h4>
        </div>
    </li>
</ul>

组件

public Priorities:Array<Object> = [
    {id: 4, text: '',isComplete:true},
    {id: 3, text: '',isComplete:true},
    {id: 2, text: '',isComplete:true},
    {id: 1, text: '',isComplete:true},
];

Answer 1

我已更改您计算所选级别的方法以保存所选状态。

这个this.selectedPrioroties = prio; 将设置当前状态，我已经创建了所选文本的 CSS 类库

  public changeTimeline(prio) {
    this.selectedPrioroties = prio;
    this.selectedState =  String(prio.text).toLowerCase().replace(' ','-');
  }

selectedStatelow , mid-low ,mid ,high的基础我在css文件app.component.css中创建了一组类

.circle {
    border: none;                 
  transition: all 200ms ease-in;
}

.low li:nth-child(1) .circle {
    background-color: #66DC71;    
}

.mid-low li:nth-child(1) .circle ,.mid-low li:nth-child(2) .circle {
    background-color: #ffeb3b;    
}

.mid li:nth-child(1) .circle ,.mid li:nth-child(2) .circle ,.mid li:nth-child(3) .circle {
    background-color: #2196f3;    
}
.high li:nth-child(1) .circle ,.high li:nth-child(2) .circle ,.high li:nth-child(3) .circle ,.high li:nth-child(4) .circle {
    background-color: #ff5722;    
}

模板

<ul class="timeline" id="timeline" [ngClass]="selectedState" >
    <li class="li" *ngFor="let priority of Priorities; let  p = index;">
        <div class="timestamp">
        </div>
        <div class="status">    
                <span class="circle" (click)="changeTimeline(priority)">{{priority.id}}</span>
            <h4 class="timelineh4">{{priority.text}}</h4>
        </div>
    </li>
</ul>

demo ?