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

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

此ERROR Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData at Object.x.convertStringToImageData (jspdf.min.js:50) at Object.x.addImage将设置当前状态，并且我已根据所选文本创建了一个CSS类库

this.selectedPrioroties = prio;

<{>

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

selectedState的基础，我在CSS文件low , mid-low ,mid ,high中创建了一组类

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;    
}

demo ?

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

1 个答案: