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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…