html - 在不同状态下更改时间线的颜色(Change the color of the timeline in different states)

Question

I developed a timeline with 4 levels.

(我制定了一个包含4个级别的时间表。)

When I click on each of the levels, the timeline is filled with green color.

(当我单击每个级别时，时间轴将充满绿色。)

Would it be possible to change this color in different types of states?

(可以在不同类型的状态下更改此颜色吗？)

In state 4 I have the circle and the lines green, how can I change this color in the remaining 3?

(在状态4中，我的圆和线为绿色，如何在剩余的3中更改此颜色？)

That is, in 3 I want yellow color, in 2 green color 3 in 1 red color.

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

In the image, I leave an example of what I want

(在图像中，我留下了我想要的例子)

Can anyone help me?

(谁能帮我？)

My code stackblitz

(我的代码堆积如山)

HTML

(的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>

Component

(零件)

public Priorities:Array<Object> = [
    {id: 4, text: 'Low',isComplete:true},
    {id: 3, text: 'Mid Low',isComplete:true},
    {id: 2, text: 'Mid',isComplete:true},
    {id: 1, text: 'High',isComplete:true},
];
  public changeTimeline(id) {
    this.Priorities.forEach(p => {
        p['isComplete'] = p['id'] < id? false:true;
    })
  }

  ask by Harry translate from so

Answer 1

等待大神答复