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

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 this.selectedPrioroties = prio; 将设置当前状态，我已经创建了所选文本的 css 类基础

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

selectedState low , 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>

演示🚀